/* ========================================================= ========================================================= PRODUCT LISTING PAGE — PLP filtreosmoza.ro ========================================================= ========================================================= */ section.page--info .catalog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; margin-top: 22px; margin-bottom: 12px; } .page--info .page__aside-head .page__heading { font-size: 30px; font-weight: 700; text-transform: none; margin-bottom: 0; padding: 0; } .page--info .page__aside-head .page__heading:after { display: none; } .page--info .page__aside-main .facets-sidebar form.facets-sidebar__form { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; padding: 16px; background: var(--plp-white); border: 1px solid var(--plp-border); border-radius: var(--plp-card-radius); box-shadow: var(--plp-shadow-card); } .page--info .page__aside-main .facets-sidebar form.facets-sidebar__form .facets-sidebar__list { margin-bottom: 0; padding-bottom: 0; } section.page--info .catalog-actions .facets-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; box-sizing: border-box; padding: 0 15px; border: 1px solid #DCE5ED; border-radius: 14px; background: #FFFFFF; color: #10162F; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } section.page--info .catalog-actions .facets-toggle::before { content: ""; display: block; flex: 0 0 auto; width: 20px; height: 20px; background-color: #1d84c6; -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc1IiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iNTEyIj4KICA8ZyBpZD0ibGF5ZXIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQuMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwMCAtMTAwKSI+CiAgICA8cGF0aCBpZD0icGF0aDYwMTIiIGQ9Im0zMjEgMTA2LjAxMjE1Yy0yLjQwNzE5IDAtNC40MzE1NSAxLjcyNTQxLTQuODk4NDQgNGgtMTMuMTAxNTZjLS41NTIyOCAwLTEgLjQ0NzcyLTEgMXMuNDQ3NzIgMSAxIDFoMTMuMTAxNTZjLjQ2Njg5IDIuMjc0NTkgMi40OTEyNSA0IDQuODk4NDQgNHM0LjQzMTU1LTEuNzI1NDEgNC44OTg0NC00aDMuMTAxNTZjLjU1MjI4IDAgMS0uNDQ3NzIgMS0xcy0uNDQ3NzItMS0xLTFoLTMuMTAxNTZjLS40NjY4OS0yLjI3NDU5LTIuNDkxMjUtNC00Ljg5ODQ0LTR6bTAgMmMxLjY2ODY3IDAgMyAxLjMzMTMzIDMgM3MtMS4zMzEzMyAzLTMgMy0zLTEuMzMxMzMtMy0zIDEuMzMxMzMtMyAzLTN6Ij48L3BhdGg+CiAgICA8cGF0aCBpZD0icGF0aDYwMTQiIGQ9Im0zMTEgMTE2LjAxMjE1Yy0yLjQwNzE5IDAtNC40MzE1NSAxLjcyNTQxLTQuODk4NDQgNGgtMy4xMDE1NmMtLjU1MjI4IDAtMSAuNDQ3NzItMSAxcy40NDc3MiAxIDEgMWgzLjEwMTU2Yy40NjY4OSAyLjI3NDU5IDIuNDkxMjUgNCA0Ljg5ODQ0IDRzNC40MzE1NS0xLjcyNTQxIDQuODk4NDQtNGgxMy4xMDE1NmMuNTUyMjggMCAxLS40NDc3MiAxLTFzLS40NDc3Mi0xLTEtMWgtMTMuMTAxNTZjLS40NjY4OS0yLjI3NDU5LTIuNDkxMjUtNC00Ljg5ODQ0LTR6bTAgMmMxLjY2ODY3IDAgMyAxLjMzMTMzIDMgM3MtMS4zMzEzMyAzLTMgMy0zLTEuMzMxMzMtMy0zIDEuMzMxMzMtMyAzLTN6Ij48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc1IiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iNTEyIj4KICA8ZyBpZD0ibGF5ZXIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQuMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwMCAtMTAwKSI+CiAgICA8cGF0aCBpZD0icGF0aDYwMTIiIGQ9Im0zMjEgMTA2LjAxMjE1Yy0yLjQwNzE5IDAtNC40MzE1NSAxLjcyNTQxLTQuODk4NDQgNGgtMTMuMTAxNTZjLS41NTIyOCAwLTEgLjQ0NzcyLTEgMXMuNDQ3NzIgMSAxIDFoMTMuMTAxNTZjLjQ2Njg5IDIuMjc0NTkgMi40OTEyNSA0IDQuODk4NDQgNHM0LjQzMTU1LTEuNzI1NDEgNC44OTg0NC00aDMuMTAxNTZjLjU1MjI4IDAgMS0uNDQ3NzIgMS0xcy0uNDQ3NzItMS0xLTFoLTMuMTAxNTZjLS40NjY4OS0yLjI3NDU5LTIuNDkxMjUtNC00Ljg5ODQ0LTR6bTAgMmMxLjY2ODY3IDAgMyAxLjMzMTMzIDMgM3MtMS4zMzEzMyAzLTMgMy0zLTEuMzMxMzMtMy0zIDEuMzMxMzMtMyAzLTN6Ij48L3BhdGg+CiAgICA8cGF0aCBpZD0icGF0aDYwMTQiIGQ9Im0zMTEgMTE2LjAxMjE1Yy0yLjQwNzE5IDAtNC40MzE1NSAxLjcyNTQxLTQuODk4NDQgNGgtMy4xMDE1NmMtLjU1MjI4IDAtMSAuNDQ3NzItMSAxcy40NDc3MiAxIDEgMWgzLjEwMTU2Yy40NjY4OSAyLjI3NDU5IDIuNDkxMjUgNCA0Ljg5ODQ0IDRzNC40MzE1NS0xLjcyNTQxIDQuODk4NDQtNGgxMy4xMDE1NmMuNTUyMjggMCAxLS40NDc3MiAxLTFzLS40NDc3Mi0xLTEtMWgtMTMuMTAxNTZjLS40NjY4OS0yLjI3NDU5LTIuNDkxMjUtNC00Ljg5ODQ0LTR6bTAgMmMxLjY2ODY3IDAgMyAxLjMzMTMzIDMgM3MtMS4zMzEzMyAzLTMgMy0zLTEuMzMxMzMtMy0zIDEuMzMxMzMtMyAzLTN6Ij48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } section.page--info .catalog-actions .facets-toggle:hover { border-color: #1d84c6; background: #F8FDFF; box-shadow: 0 6px 18px rgba(32, 187, 240, 0.10); } section.page--info .catalog-actions .facets-toggle:active { transform: translateY(1px); } /* FILTER ICON */ section.page--info .catalog-actions .facets-toggle .icon { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; color: #1d84c6; fill: currentColor; } /* FILTER TEXT */ section.page--info .catalog-actions .facets-toggle__label { color: #10162F; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } /* ===================================================== SORT WRAPPER ===================================================== */ section.page--info .catalog-actions .sort-view { position: relative; display: block; min-width: 0; width: 190px; margin-left: auto; } /* ascundem "Sorteaza" pe mobile */ section.page--info .catalog-actions .sort-view__label { display: none; } /* ===================================================== SORT SELECT ===================================================== */ section.page--info .catalog-actions .sort-view__options { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: 46px; box-sizing: border-box; margin: 0; padding: 0 42px 0 15px; border: 1px solid #DCE5ED; border-radius: 14px; outline: none; background-color: #FFFFFF; color: #10162F; font-size: 14px; font-weight: 500; line-height: normal; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035); cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } section.page--info .catalog-actions .sort-view__options:hover { border-color: #BFD9E7; } section.page--info .catalog-actions .sort-view__options:focus { border-color: #1d84c6; box-shadow: 0 0 0 3px rgba(32, 187, 240, 0.10); } @media (max-width: 767px) { .page--info .page__aside-head .page__heading { font-size: 26px; } } /* ========================================================= 01. PLP VARIABLES ========================================================= */ .page--info { --plp-navy: #0D1330; --plp-title: #10162F; --plp-body: #414B5D; --plp-muted: #6E7485; --plp-blue: #1d84c6; --plp-blue-hover: #14A9DD; --plp-border: #E8EBF1; --plp-border-hover: #DCE3EC; --plp-pill: #F4F7FB; --plp-image-bg: #F8FAFC; --plp-white: #FFFFFF; --plp-card-radius: 22px; --plp-shadow-card: 0 8px 28px rgba(15, 23, 42, 0.055); --plp-shadow-card-hover: 0 16px 38px rgba(15, 23, 42, 0.09); } /* ========================================================= 02. PRODUCT THEMES fallback-ul este albastrul site-ului ========================================================= */ .page--info .product--grid { --card-accent: #1d84c6; --card-accent-soft: #EBF9FE; --card-accent-hover: #14A9DD; } /* BLUE */ .page--info .product--theme-blue { --card-accent: #176DDD; --card-accent-soft: #EAF5FF; --card-accent-hover: #125CC3; } /* ICE / PROAQUA */ .page--info .product--theme-ice { --card-accent: #36A9C9; --card-accent-soft: #EBF8FB; --card-accent-hover: #2187A5; } /* WHITE */ .page--info .product--theme-white { --card-accent: #9AA4B2; --card-accent-soft: #F4F6F8; --card-accent-hover: #7E8896; } /* GREEN */ .page--info .product--theme-green { --card-accent: #2C9338; --card-accent-soft: #EDF8ED; --card-accent-hover: #247C2E; } /* ORANGE */ .page--info .product--theme-orange { --card-accent: #F97815; --card-accent-soft: #FFF1E7; --card-accent-hover: #DD620A; } /* PENTARO */ .page--info .product--theme-violet { --card-accent: #6858C8; --card-accent-soft: #F0EEFC; --card-accent-hover: #5142A9; } /* PRO */ .page--info .product--theme-dark { --card-accent: #EEF1F5; --card-accent-soft: #0B1730; --card-accent-hover: #162746; } /* ========================================================= 03. ELEMENTE PE CARE NU LE FOLOSIM ÎN PLP ========================================================= */ .page--info .product__SubTitleProductFeatured, .page--info .product__ProductCommercialTitle, .page--info .product__SubTitleProductRecommendations, .page--info .product__ShortDescriptionProductRecommendations, .page--info .product__benefitsListingRecommendations, .page--info .product__cta--recommendations, .page--info .product__cta--featured { display: none !important; } /* ========================================================= 04. GRID ========================================================= */ .page--info .products-catalog__container .products-grid__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* ========================================================= 05. PRODUCT CARD ========================================================= */ .page--info .product--grid { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; padding: 0; background: var(--plp-white); border: 1px solid var(--plp-border); border-radius: var(--plp-card-radius); box-shadow: var(--plp-shadow-card); text-align: left; transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease; } .page--info .product--grid:hover { border-color: color-mix( in srgb, var(--card-accent) 20%, #E8EBF1 ); box-shadow: var(--plp-shadow-card-hover); } /* ========================================================= 06. IMAGE CONTAINER ========================================================= */ .page--info .product--grid .grid-image { position: relative; width: 100%; padding: 14px 14px 0; overflow: hidden; } .page--info .product--grid .grid-image__link { display: block; position: relative; text-decoration: none; } .page--info .product--grid .grid-image__image-wrapper { position: relative; display: block; width: 100%; overflow: hidden; background: var(--plp-image-bg); } /* ========================================================= 07. IMAGE SELECTION ON PLP dacă avem Featured → folosim Featured dacă nu → rămâne imaginea default Recommendations nu apare niciodată în PLP ========================================================= */ .page--info .grid-image__image--featured, .page--info .grid-image__image--recommendations { display: none; } /* ascundem default doar dacă avem Featured */ .page--info .has-featured-image .grid-image__image--default { display: block; } /* afișăm Featured */ .page--info .has-featured-image .grid-image__image--featured { display: none; } /* Recommendations rămâne ascuns */ .page--info .grid-image__image--recommendations { display: none !important; } /* imagine standard */ .page--info .grid-image__image--default { width: 100%; height: 100%; object-fit: contain; transition: transform 350ms ease; } /* imaginile Featured sunt lifestyle / editorial */ .page--info .grid-image__image--featured { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; } .page--info .product--grid:hover .grid-image__image { transform: scale(1.025); } /* ========================================================= 08. WHITE WAVE BETWEEN IMAGE / CONTENT același limbaj vizual ca pe homepage ========================================================= */ /* .page--info .grid-image__image-wrapper::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 30px; z-index: 4; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C150,35 220,75 370,52 C520,28 610,72 750,50 C870,32 930,48 1000,42 L1000,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: bottom; background-size: 100% 100%; } */ /* ========================================================= 09. PRODUCT BADGE Compact / Premium / Esențial / etc. ========================================================= */ .page--info .product__badgeProduct { position: absolute; left: 0; bottom: 8px; top: auto; z-index: 8; display: flex; max-width: calc(100% - 28px); pointer-events: none; } .page--info .product__badgeProduct > div { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; padding: 5px 11px; border-radius: 999px; background: var(--card-accent-soft); color: var(--card-accent); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07); } /* ========================================================= 10. PROMO BADGES reducere / BF / campanie specială ========================================================= */ .page--info .grid-image__badges { position: absolute; z-index: 9; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .page--info .grid-image__badges--right { top: 0px !important; right: 0px !important; align-items: flex-end; } .page--info .grid-image__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; padding: 5px 11px; border-radius: 9px; box-sizing: border-box; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } /* reducere */ .page--info .grid-image__badge--price-discount { background: #FF3347; color: #FFFFFF; } /* campanie specială */ .page--info .grid-image__badge--special-campaign { background: #EDF6FF; color: #176DDD; font-weight: 600; } /* Black Friday */ .page--info .grid-image__badge--black-friday { background: #070A0F; color: #FFFFFF; padding: 7px 12px; border-radius: 8px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.15px; } .page--info .black-friday-badge__black { color: #FFFFFF; } .page--info .black-friday-badge__friday { color: #FFD400; } .page--info .product--grid .product__rating { } .page--info .product--grid .product__rating-fill { } /* ========================================================= 11. WISHLIST ========================================================= */ .page--info .grid-image__actions { position: absolute; top: 7px; right: 10px; z-index: 10; } .page--info .grid-image__save-wishlist { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; bottom: 0; right: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .page--info .grid-image__save-wishlist::before { background: none; } .page--info .grid-image__save-wishlist svg { color: var(--plp-title); transition: color 180ms ease, transform 180ms ease; } .page--info .grid-image__save-wishlist:hover { transform: scale(1.06); background: #FFFFFF; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14); } .page--info .grid-image__save-wishlist--saved svg { color: #FF3347; } /* ========================================================= 12. PRODUCT DATA ========================================================= */ .page--info .product--grid .product__data { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; padding: 0 14px 18px; box-sizing: border-box; } /* ========================================================= 13. MAIN PRODUCT TITLE păstrăm titlul SEO / real al produsului ========================================================= */ .page--info .product__data > .product__name { display: -webkit-box; width: 100%; margin: 0; padding: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 16px; font-weight: 650; line-height: 1.4; letter-spacing: -0.15px; color: #10162F; text-align: left; text-decoration: none !important; } .page--info .product__data > .product__name:hover { color: var(--card-accent-hover); } /* ========================================================= 14. BENEFITS FEATURED stil nou — clean, ca în imaginea 1 ========================================================= */ .page--info .product__benefitsListingFeatured { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 12px; margin-bottom: 2px; } .page--info .product__benefitsListingFeatured .product-benefits-list { display: flex; align-items: center; text-align: left; width: 100%; min-height: auto; box-sizing: border-box; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; /* culoarea iconurilor tale */ --benefit-icon-color: var(--card-accent); } .page--info .product__benefitsListingFeatured .product-benefits-list > span { display: inline-flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 0; color: #414B5D; font-size: 12px; font-weight: 500; line-height: 1.35; } /* icon */ .page--info .product__benefitsListingFeatured .benefit-icon { flex: 0 0 auto; width: 20px; height: 20px; opacity: 1; } /* dacă vrei ca și textul să ia subtil culoarea temei produsului */ .page--info .product--theme-blue .product__benefitsListingFeatured .product-benefits-list > span { color: #176DDD; } .page--info .product--theme-ice .product__benefitsListingFeatured .product-benefits-list > span { color: #36A9C9; } .page--info .product--theme-white .product__benefitsListingFeatured .product-benefits-list > span { color: #6E7485; } .page--info .product--theme-green .product__benefitsListingFeatured .product-benefits-list > span { color: #2C9338; } .page--info .product--theme-orange .product__benefitsListingFeatured .product-benefits-list > span { color: #F97815; } .page--info .product--theme-violet .product__benefitsListingFeatured .product-benefits-list > span { color: #6858C8; } .page--info .product--theme-dark .product__benefitsListingFeatured .product-benefits-list > span { color: #0D1330; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 550px) { .page--info .product__benefitsListingFeatured { gap: 8px; margin-top: 12px; } .page--info .product__benefitsListingFeatured .product-benefits-list > span { gap: 7px; font-size: 13px; line-height: 1.3; } .page--info .product__benefitsListingFeatured .benefit-icon { width: 16px; height: 16px; } } /* ========================================================= 15. FOOTER / PRICE ========================================================= */ /* ========================================================= 15. FOOTER / PRICE IDENTIC CU HOMEPAGE FEATURED ========================================================= */ .page--info .product--grid .product__footer { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 18px; } .page--info .product--grid .product__footer .product__info--price-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: 12px; row-gap: 2px; width: 100%; min-width: 0; margin: 0; padding: 0; } .page--info .product--grid .product__footer .product__info--price-row .price { display: flex; } /* ========================================================= CURRENT PRICE ========================================================= */ .page--info .product--grid .product__footer .product__info--price-row .product__info--price-gross { display: flex; align-items: baseline; flex: 0 0 auto; white-space: nowrap; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.35px; margin-right: 0; color: #10162F; } .page--info .product__info--price-gross .price { display: flex; align-items: baseline; white-space: nowrap; } /* DECIMALS — CURRENT PRICE */ .page--info .product--grid .product__footer .product__info--price-row .product__info--price-gross .price__decimal { top: -2px; left: 0; position: relative; font-size: 12px; line-height: unset; vertical-align: unset; margin-left: 3px; margin-right: 3px; } /* ========================================================= 16. OLD PRICE ========================================================= */ .page--info .product--grid .product__footer .product__info--price-row .product__info--old-price-gross { display: flex; align-items: baseline; flex: 0 0 auto; font-size: 14px; font-weight: 400; line-height: 1.2; color: #9AA3AF; text-decoration: line-through; } .page--info .product__info--old-price-gross .price { display: flex; align-items: baseline; white-space: nowrap; } /* DECIMALS — OLD PRICE */ .page--info .product--grid .product__footer .product__info--price-row .product__info--old-price-gross .price__decimal { top: -1px; left: 0; position: relative; font-size: 8px; line-height: unset; vertical-align: unset; margin-left: 2px; margin-right: 3px; } /* ========================================================= 17. ADD TO CART CTA principal PLP ========================================================= */ /* ========================================================= ADD TO CART ========================================================= */ .page--info .product--grid .product__actions { display: flex; justify-content: center; width: 100%; margin-top: 20px; flex-grow: initial; } .page--info .product__add-to-cart { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-width: 170px; min-height: 48px; box-sizing: border-box; padding: 0 18px; border: 1px solid #1d84c6 !important; border-radius: 16px; background: #1d84c6 !important; color: #FFFFFF !important; font-size: 15px; font-weight: 650; line-height: 1; text-decoration: none !important; box-shadow: 0 6px 16px rgba(32, 187, 240, 0.16); transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } /* ========================================================= CART ICON culoarea este preluată automat din text ========================================================= */ .page--info .product__add-to-cart::after { content: ""; display: block; flex: 0 0 auto; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbC1ydWxlPSJldmVub2RkIiBoZWlnaHQ9IjUxMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCA0OCA0OCIgd2lkdGg9IjUxMiI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUzIC0yMTIpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTUgLTYwKSI+CiAgICAgIDxnIGlkPSJuZ2ljb24iPgogICAgICAgIDxwYXRoIGQ9Im00MjIuNTE5IDI4NS41aC0yLjY1N2MtMS44MzYgMC0zLjM2IDEuNDE5LTMuNDkxIDMuMjUxbC0xLjcxNCAyNGMtLjA2OS45NjkuMjY3IDEuOTIzLjkyOSAyLjYzNC42NjMuNzExIDEuNTkgMS4xMTUgMi41NjIgMS4xMTVoMjcuNzA0Yy45NzIgMCAxLjg5OS0uNDA0IDIuNTYyLTEuMTE1LjY2Mi0uNzExLjk5OC0xLjY2NS45MjktMi42MzRsLTEuNzE0LTI0Yy0uMTMxLTEuODMyLTEuNjU1LTMuMjUxLTMuNDkxLTMuMjUxaC0yLjYzOHYtLjVjMC01LjI0Ny00LjI1My05LjUtOS41LTkuNS01LjA1NSAwLTkuNzI3IDQuMDI2LTkuNSA5LjUuMDA3LjE2Ni4wMTMuMzMzLjAxOS41em0xOC45ODEgM3Y3LjVjMCAuODI4LS42NzIgMS41LTEuNSAxLjVzLTEuNS0uNjcyLTEuNS0xLjV2LTcuNWgtMTN2Ny41YzAgLjgyOC0uNjcyIDEuNS0xLjUgMS41cy0xLjUtLjY3Mi0xLjUtMS41YzAgMCAuMTMtMy41MDUuMDg3LTcuNWgtMi43MjVjLS4yNjIgMC0uNDguMjAzLS40OTguNDY0IDAgMC0xLjcxNSAyNC0xLjcxNSAyNC0uMDEuMTM5LjAzOC4yNzUuMTMzLjM3Ny4wOTUuMTAxLjIyNy4xNTkuMzY2LjE1OWgyNy43MDRjLjEzOSAwIC4yNzEtLjA1OC4zNjYtLjE1OS4wOTUtLjEwMi4xNDMtLjIzOC4xMzMtLjM3N2wtMS43MTUtMjRjLS4wMTgtLjI2MS0uMjM2LS40NjQtLjQ5OC0uNDY0em0tMy0zdi0uNWMwLTMuNTktMi45MS02LjUtNi41LTYuNS0zLjU5IDAtNi41IDIuOTEtNi41IDYuNXYuNXoiPjwvcGF0aD4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbC1ydWxlPSJldmVub2RkIiBoZWlnaHQ9IjUxMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCA0OCA0OCIgd2lkdGg9IjUxMiI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUzIC0yMTIpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTUgLTYwKSI+CiAgICAgIDxnIGlkPSJuZ2ljb24iPgogICAgICAgIDxwYXRoIGQ9Im00MjIuNTE5IDI4NS41aC0yLjY1N2MtMS44MzYgMC0zLjM2IDEuNDE5LTMuNDkxIDMuMjUxbC0xLjcxNCAyNGMtLjA2OS45NjkuMjY3IDEuOTIzLjkyOSAyLjYzNC42NjMuNzExIDEuNTkgMS4xMTUgMi41NjIgMS4xMTVoMjcuNzA0Yy45NzIgMCAxLjg5OS0uNDA0IDIuNTYyLTEuMTE1LjY2Mi0uNzExLjk5OC0xLjY2NS45MjktMi42MzRsLTEuNzE0LTI0Yy0uMTMxLTEuODMyLTEuNjU1LTMuMjUxLTMuNDkxLTMuMjUxaC0yLjYzOHYtLjVjMC01LjI0Ny00LjI1My05LjUtOS41LTkuNS01LjA1NSAwLTkuNzI3IDQuMDI2LTkuNSA5LjUuMDA3LjE2Ni4wMTMuMzMzLjAxOS41em0xOC45ODEgM3Y3LjVjMCAuODI4LS42NzIgMS41LTEuNSAxLjVzLTEuNS0uNjcyLTEuNS0xLjV2LTcuNWgtMTN2Ny41YzAgLjgyOC0uNjcyIDEuNS0xLjUgMS41cy0xLjUtLjY3Mi0xLjUtMS41YzAgMCAuMTMtMy41MDUuMDg3LTcuNWgtMi43MjVjLS4yNjIgMC0uNDguMjAzLS40OTguNDY0IDAgMC0xLjcxNSAyNC0xLjcxNSAyNC0uMDEuMTM5LjAzOC4yNzUuMTMzLjM3Ny4wOTUuMTAxLjIyNy4xNTkuMzY2LjE1OWgyNy43MDRjLjEzOSAwIC4yNzEtLjA1OC4zNjYtLjE1OS4wOTUtLjEwMi4xNDMtLjIzOC4xMzMtLjM3N2wtMS43MTUtMjRjLS4wMTgtLjI2MS0uMjM2LS40NjQtLjQ5OC0uNDY0em0tMy0zdi0uNWMwLTMuNTktMi45MS02LjUtNi41LTYuNS0zLjU5IDAtNi41IDIuOTEtNi41IDYuNXYuNXoiPjwvcGF0aD4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .page--info .product__add-to-cart:hover { background: #14A9DD !important; border-color: #14A9DD !important; color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(32, 187, 240, 0.24); } /* ========================================================= 18. PRODUCTS WITHOUT BENEFITS Nu introducem elemente artificiale. Footer-ul merge automat în partea de jos datorită margin-top:auto. Cartușele / accesoriile rămân curate. ========================================================= */ /* ========================================================= 19. DESKTOP / TABLET RESPONSIVE ========================================================= */ @media (max-width: 1399px) { .page--info .products-catalog__container .products-grid__items { gap: 18px; } .page--info .product__data > .product__name { font-size: 16px; } .page--info .product__benefitsListingFeatured .product-benefits-list > span { font-size: 12px; } } /* 3 coloane */ @media (min-width: 992px) and (max-width: 1199px) { .page--info .products-catalog__container .products-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= 20. TABLET ========================================================= */ @media (min-width: 551px) and (max-width: 991px) { .page--info .products-catalog__container .products-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .page--info .product--grid { border-radius: 20px; } } /* ========================================================= 21. MOBILE ========================================================= */ @media (max-width: 550px) { .page--info .products-catalog__container .products-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .page--info .product--grid { border-radius: 16px; } .page--info .product--grid .product__data { padding: 12px; } .page--info .product__data > .product__name { min-height: 57px; font-size: 14px; line-height: 1.35; -webkit-line-clamp: 3; } .page--info .product__benefitsListingFeatured { gap: 5px; margin-top: 10px; } .page--info .product__benefitsListingFeatured .product-benefits-list > span { gap: 5px; font-size: 10px; } .page--info .product--grid .product__footer { padding-top: 15px; } .page--info .product__info--price-gross { font-size: 18px; } .page--info .product__info--price-gross .price__currency { font-size: 13px; } .page--info .product__actions { margin-top: 10px; } .page--info .product__add-to-cart { min-height: 42px; padding: 0 8px; min-width: auto; width: 100%; font-size: 12px; } .page--info .product__badgeProduct { left: 9px; } .page--info .product__badgeProduct > div { min-height: 25px; padding: 4px 8px; font-size: 9px; } .page--info .grid-image__actions { top: 7px; right: 10px; } .page--info .grid-image__save-wishlist { width: 32px; height: 32px; } .page--info .grid-image__badges--right { top: 46px; right: 8px; } .page--info .grid-image__badge { min-height: 24px; padding: 4px 7px; font-size: 9px; border-radius: 7px; } }