/* Keep all your existing styles from product-card-build.css below this line */ @charset "UTF-8"; /* --- START: Grid Layout Correction --- */ .infineat-product-grid-wrapper { display: grid; grid-template-columns: repeat(var(--grid-columns, 3), 1fr); gap: 1rem; /* You can adjust the gap */ } /* Pagination Styles */ .infineat-plus-pagination { grid-column: 1 / -1; /* Make pagination span all columns */ margin-top: 30px; text-align: center; } .infineat-plus-pagination .page-numbers { padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; text-decoration: none; border-radius: 4px; } .infineat-plus-pagination .page-numbers.current { background-color: #3160df; /* Using a color from your CSS */ color: #fff; border-color: #3160df; } /* --- END: Grid Layout Correction --- */ /* Google Fonts (Ubuntu, Open Sans, Voltaire) are imported in the of index.html. The font families are defined as CSS variables in variables.scss. */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Voltaire&display=swap&family=Baloo+2:wght@400..800"); :root { /* ——— Font families ——— */ --font-sans: "Open Sans", sans-serif; --font-ubuntu: "Ubuntu", sans-serif; --font-voltair: "Voltaire", sans-serif; --font-moniker: "Moniker", sans-serif; --font-baloo: "Baloo", sans-serif; /* ——— Colors ——— */ /* Blue */ --blue-400: #3160df; --blue-500: #3a609f; --blue-600: #265096; --blue-800: #0c2773; /* Fuchsia */ --fuchsia-50: #fef9fc; --fuchsia-100: #fbeaf4; --fuchsia-200: #f3d9e7; --fuchsia-300: #d9c7d9; --fuchsia-400: #ab63ab; --fuchsia-500: #9e719e; --fuchsia-600: #970082; --fuchsia-700: #88007e; --fuchsia-800: #6b0066; /* Gray */ --gray-50: #fdfcfe; --gray-100: #f7f5fc; --gray-300: #ccb8cc; --gray-600: #7f727f; /* Green */ --green-400: #17773c; /* Orange */ --orange-800: #d06928; /* Red */ --red-400: #c7382a; /* White */ --white: #ffffff; } /* Moniker font is self-hosted. */ /* ExtraLight */ @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; } /* Light */ @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebLight.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } /* Medium */ @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } /* Regular */ @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; } /* Bold */ @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebBold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../../../../assets/fonts/moniker/MonikerWebBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } .infineat-product-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--fuchsia-300); box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); font-size: 12px; background-color: var(--white); position: relative; z-index: 1; transition: z-index 0s linear 0.5s; } .infineat-product-card__image { width: 100%; aspect-ratio: 4/5; border-radius: 12px 12px 0 0; overflow: hidden; position: relative; background-color: var(--fuchsia-50); } .infineat-product-card__image img { width: 100%; height: 100%; object-fit: cover; } .infineat-product-card__content { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .infineat-product-card__offer { font-size: 14px; line-height: 18px; min-height: 18px; color: var(--red-400); font-family: var(--font-voltair); } .infineat-product-card__price { margin-top: 2px; display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--fuchsia-800); font-family: var(--font-moniker); line-height: 18px; min-height: 18px; } .infineat-product-card__price span.old-price { text-decoration: line-through; color: var(--gray-600); } .infineat-product-card__price span.sale-price { color: var(--red-400); } .infineat-product-card__price-info { color: var(--fuchsia-500); font-weight: 300; margin-top: -4px; line-height: 16px; min-height: 16px; } .infineat-product-card__vendor { margin-top: 8px; } .infineat-product-card__vendor a { display: flex; align-items: center; gap: 6px; color: var(--fuchsia-800); font-family: var(--font-voltair); line-height: 32px; min-height: 32px; font-size: 16px; } .infineat-product-card__vendor a:hover { color: var(--fuchsia-700); } .infineat-product-card__vendor a img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; } .infineat-product-card__category { position: relative; display: flex; align-items: center; justify-content: center; } .infineat-product-card__category span { color: var(--blue-500); font-family: var(--font-ubuntu); font-size: 12px; padding: 0 4px; background-color: var(--white); line-height: 14px; min-height: 14px; z-index: 2; position: relative; } .infineat-product-card__category::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; z-index: 1; background-color: var(--fuchsia-300); } .infineat-product-card__title { line-height: 18px; min-height: 56px; } .infineat-product-card__title span { font-size: 16px; line-height: 16px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-product-card__title h3 { font-weight: 400; margin: 0; } .infineat-product-card__title h3 a { font-size: 14px; color: var(--fuchsia-800); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .infineat-product-card__discount { position: absolute; background-image: url("../../../../assets/img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -13px; top: 12px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; } .infineat-product-card__add-to-wishlist { position: absolute; right: 16px; top: 16px; font-size: 24px; cursor: pointer; } .infineat-product-card__add-to-wishlist a { color: var(--white); } .infineat-product-card__add-to-wishlist a svg { stroke: var(--red-400); stroke-width: 4px; width: 32px; height: 32px; } .infineat-product-card__notice { color: var(--orange-800); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); } .infineat-product-card__notice svg { width: 16px; height: 16px; } .infineat-product-card__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .infineat-product-card__shipping svg { width: 28px; height: 28px; } .infineat-product-card__shipping div { display: flex; flex-direction: column; } .infineat-product-card__sku span { font-size: 12px; color: var(--gray-600); } .infineat-product-card__product-star { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--fuchsia-300); padding-bottom: 6px; margin-bottom: 6px; } .infineat-product-card__add-to-cart { position: absolute; top: 50%; right: 16px; opacity: 0; visibility: hidden; transform: translateY(-50%) scale(0.5); transition: 0.25s ease-in-out; z-index: 10; } .infineat-product-card__add-to-cart a { color: var(--white); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--fuchsia-600); transition: 0.25s ease-in-out; } .infineat-product-card__add-to-cart a svg { width: 20px; height: 20px; } .infineat-product-card__add-to-cart--loading { cursor: default; transform: translateY(-50%) scale(1); opacity: 1; visibility: visible; } .infineat-product-card__add-to-cart--loading::before { content: ""; position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); border: 2px solid var(--white); border-color: var(--white) transparent transparent transparent; animation: spin 0.75s infinite linear; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; } .infineat-product-card__quantity { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 66px; transform-origin: right; display: inline-flex; align-items: center; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-500); box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0.35); opacity: 0; visibility: hidden; transition: width 0.25s 0.25s, opacity 0.1s 0.25s, visibility 0.1s 0.25s; z-index: 30; overflow: hidden; } .infineat-product-card__quantity button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background-color: unset; border: unset; cursor: pointer; border-radius: 50%; font-size: 18px; font-weight: 500; transition: 0.1s; color: var(--fuchsia-800); min-height: auto; } .infineat-product-card__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-product-card__quantity button:hover { background-color: unset; border: unset; } .infineat-product-card__quantity button:active { background-color: var(--fuchsia-100); } .infineat-product-card__quantity input[type=number] { background-color: unset; border: unset; width: 50px; font-size: 20px; text-align: center; font-weight: 500; color: var(--fuchsia-800); height: 30px; line-height: 30px; border: 1px solid transparent; border-radius: 4px; font-family: var(--font-moniker); margin: 0 -2px; padding: 0; appearance: textfield; z-index: 20; } .infineat-product-card__quantity input[type=number]::-webkit-inner-spin-button, .infineat-product-card__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-product-card__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-product-card__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-product-card__cart-count { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; background-color: var(--gray-50); color: var(--fuchsia-800); line-height: 36px; border-radius: 20px; border: 1px solid var(--fuchsia-500); box-shadow: 0 0 5px 0 rgba(105, 99, 134, 0.35); font-size: 20px; font-weight: 500; opacity: 0; visibility: hidden; transition: 0.25s 0.1s; min-width: 65px; } .infineat-product-card__cart-count svg { width: 20px; height: 20px; color: var(--fuchsia-600); } .infineat-product-card__actions { position: relative; } .infineat-product-card__actions[data-has-in-cart=true] .infineat-product-card__add-to-cart { display: none; } .infineat-product-card__actions[data-has-in-cart=true] .infineat-product-card__cart-count { opacity: 1; visibility: visible; } .infineat-product-card__actions[data-has-in-cart=true]:hover .infineat-product-card__quantity { opacity: 1; visibility: visible; width: 120px; transition: width 0.25s 0s, opacity 0.25s 0s, visibility 0.25s 0s; } .infineat-product-card__actions[data-has-in-cart=true]:hover .infineat-product-card__cart-count { opacity: 0; visibility: hidden; min-width: 120px; transition: 0.25s 0.1s; } .infineat-product-card__hide-elements { position: absolute; left: -1px; right: -1px; top: calc(100% - 24px); background-color: var(--white); border-radius: 0 0 12px 12px; border: 1px solid var(--fuchsia-300); border-top: none; box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); padding: 0 16px 8px; display: flex; flex-direction: column; opacity: 0; transition: 0.25s 0.25s ease-in-out; } .infineat-product-card__hide-elements:before { content: ""; position: absolute; top: -8px; height: 8px; left: 0; right: 0; background-color: var(--white); } .infineat-product-card:hover { z-index: 100; transition-delay: 0s; } .infineat-product-card:hover .infineat-product-card__hide-elements { opacity: 1; top: calc(100% - 10px); } .infineat-product-card:hover .infineat-product-card__add-to-cart { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .infineat-product-card__price .woocommerce-Price-amount, .infineat-product-card__price bdi { font-size: inherit !important; color: inherit !important; font-family: var(--font-moniker) !important; text-decoration: none !important; } /* --- START: Infinite Scroll Loading Indicator --- */ .infineat-loading-spinner { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; padding: 2rem; } .infineat-loading-spinner::after { content: ''; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--fuchsia-600, #970082); border-radius: 50%; animation: infineat-spin 1s linear infinite; } @keyframes infineat-spin { to { transform: rotate(360deg); } } /* --- END: Infinite Scroll Loading Indicator --- */ /*# sourceMappingURL=style.css.map */