/* Mzya Seller Storefront page styles — moved from Blade in Phase 9W6 to keep clean. */ .seller-tab-button { align-items: center; border-bottom: 2px solid transparent; color: #000000; display: inline-flex; font-size: .95rem; font-weight: 600; gap: .55rem; padding: .65rem .9rem; transition: color .2s ease, border-color .2s ease; } .seller-tab-button:hover { color: #1e3a8a; } .seller-tab-button.is-active { border-bottom-color: #2c5792; color: #2c5792; } .seller-icon-action { align-items: center; border: 1px solid #d4d4d8; border-radius: 9999px; color: #334155; display: inline-flex; height: 2.5rem; justify-content: center; transition: all .2s ease; width: 2.5rem; } .seller-icon-action:hover { border-color: #94a3b8; color: #1e3a8a; } .seller-icon-action.is-disabled { cursor: not-allowed; opacity: .5; } .seller-icon-action-whatsapp { background: transparent !important; border-color: #25d366 !important; color: #25d366 !important; } .seller-icon-action-whatsapp:hover { background: transparent !important; border-color: #1daa56 !important; color: #1daa56 !important; } .seller-icon-action-contact { background: transparent; border-color: #f59e0b; color: #b45309; } .seller-icon-action-contact:hover { background: transparent; border-color: #d97706; color: #92400e; } .seller-icon-action-instagram { background: transparent; border-color: #d62976; color: #d62976; } .seller-icon-action-instagram:hover { background: transparent; border-color: #c13584; color: #c13584; } .seller-icon-action-facebook { background: transparent; border-color: #1877f2; color: #1877f2; } .seller-icon-action-facebook:hover { background: transparent; border-color: #166fe5; color: #166fe5; } .seller-icon-action-follow { background: transparent; border-color: #f59e0b; color: #f59e0b; } .seller-icon-action-follow:hover { background: transparent; border-color: #d97706; color: #d97706; } .seller-icon-action-follow.is-disabled { opacity: .85; } .seller-icon-action-report { background: transparent; border-color: #ef4444; color: #ef4444; } .seller-icon-action-report:hover { background: transparent; border-color: #dc2626; color: #dc2626; } .mzya-storefront-shell { color: #111827; } .mzya-storefront-hero { border: 1px solid rgba(226, 232, 240, .95); border-radius: 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, .08); overflow: hidden; } .mzya-storefront-hero-media { min-height: 330px; } .mzya-storefront-hero-overlay { background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 30%), linear-gradient(90deg, rgba(8, 15, 28, .86) 0%, rgba(8, 15, 28, .62) 48%, rgba(8, 15, 28, .28) 100%), linear-gradient(180deg, rgba(8, 15, 28, .08) 0%, rgba(8, 15, 28, .58) 100%); } [dir="rtl"] .mzya-storefront-hero-overlay { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 30%), linear-gradient(270deg, rgba(8, 15, 28, .86) 0%, rgba(8, 15, 28, .62) 48%, rgba(8, 15, 28, .28) 100%), linear-gradient(180deg, rgba(8, 15, 28, .08) 0%, rgba(8, 15, 28, .58) 100%); } .mzya-storefront-hero { isolation: isolate; position: relative; z-index: 0; } .mzya-storefront-hero-media, .mzya-store-nav, .seller-tab-panel { position: relative; z-index: 0; } .mzya-storefront-logo-card { background: rgba(255, 255, 255, .97); border: 1px solid rgba(255, 255, 255, .78); border-radius: 22px; box-shadow: 0 18px 38px rgba(0, 0, 0, .18); } .mzya-pill { align-items: center; backdrop-filter: blur(14px); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #fff; display: inline-flex; font-size: .82rem; font-weight: 700; gap: .5rem; padding: .55rem .8rem; white-space: nowrap; } .mzya-store-primary-btn, .mzya-store-secondary-btn, .mzya-store-soft-btn { align-items: center; border-radius: 12px; display: inline-flex; font-size: .78rem; font-weight: 850; gap: .45rem; justify-content: center; line-height: 1.15; min-height: 38px; padding: .58rem .8rem; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .mzya-store-primary-btn { background: #e4a224; color: #111827; box-shadow: 0 16px 32px rgba(228, 162, 36, .25); } .mzya-store-primary-btn:hover { background: #d99618; transform: translateY(-1px); } .mzya-store-secondary-btn { background: #fff; color: #111827; box-shadow: 0 16px 32px rgba(15, 23, 42, .12); } .mzya-store-secondary-btn:hover { transform: translateY(-1px); } .mzya-store-soft-btn { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; } .mzya-store-soft-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); } .mzya-hero-main-grid { display: grid; gap: 1.15rem; align-items: center; } .mzya-hero-actions { display: grid; gap: .65rem; width: 100%; } .mzya-hero-action-main, .mzya-hero-action-secondary { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mzya-hero-actions .mzya-store-soft-btn { min-height: 36px; padding: .5rem .65rem; } .mzya-hero-actions form { margin: 0; min-width: 0; } .mzya-hero-rating-card { backdrop-filter: blur(12px); background: rgba(7, 12, 22, .42); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; color: #fff; padding: .55rem .7rem; } @media (min-width: 1180px) { .mzya-hero-main-grid { grid-template-columns: 112px minmax(0, 1fr) minmax(255px, 300px); } .mzya-hero-actions { justify-self: end; max-width: 300px; } } @media (min-width: 768px) and (max-width: 1179px) { .mzya-hero-main-grid { grid-template-columns: auto minmax(0, 1fr); } .mzya-hero-actions { grid-column: 1 / -1; justify-self: start; max-width: 620px; } .mzya-hero-action-secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mzya-store-nav { border: 1px solid rgba(226, 232, 240, .95); border-radius: 18px; box-shadow: 0 14px 36px rgba(15, 23, 42, .04); overflow-x: auto; scrollbar-width: thin; } .mzya-store-nav .seller-tab-button { border-bottom-width: 3px; flex: 0 0 auto; padding: .9rem 1rem; } .mzya-section-header { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; } .mzya-section-title { color: #111827; font-size: 1.35rem; font-weight: 850; letter-spacing: -.02em; } .mzya-section-subtitle { color: #000000; font-size: .9rem; margin-top: .25rem; } .mzya-section-link { align-items: center; color: #2c5792; display: inline-flex; flex: 0 0 auto; font-size: .9rem; font-weight: 850; gap: .35rem; white-space: nowrap; } .mzya-section-link:hover { text-decoration: underline; text-underline-offset: 4px; } .mzya-section-kicker { color: #2c5792; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .mzya-store-card { background: #fff; border: 1px solid rgba(226, 232, 240, .95); border-radius: 22px; box-shadow: 0 18px 42px rgba(15, 23, 42, .05); overflow: hidden; } .mzya-category-card, .mzya-product-card, .mzya-review-card { border: 1px solid rgba(226, 232, 240, .95); border-radius: 18px; background: #fff; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .mzya-category-card:hover, .mzya-product-card:hover, .mzya-review-card:hover { border-color: rgba(44, 87, 146, .28); box-shadow: 0 18px 38px rgba(15, 23, 42, .08); transform: translateY(-2px); } .mzya-product-image-wrap { background: #f8fafc; aspect-ratio: 4 / 5; overflow: hidden; } .mzya-home-products-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mzya-home-products-grid .mzya-product-card { min-width: 0; } .mzya-home-products-grid .mzya-product-image-wrap { max-height: 285px; } @media (min-width: 640px) { .mzya-home-products-grid { gap: 1.25rem; } } @media (min-width: 1024px) { .mzya-home-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1280px) { .mzya-home-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .mzya-product-image-wrap img, .mzya-category-card img { height: 100%; object-fit: cover; transition: transform .28s ease; width: 100%; } .mzya-product-card:hover img, .mzya-category-card:hover img { transform: scale(1.035); } .mzya-service-strip { background: linear-gradient(90deg, rgba(248, 242, 231, .96), rgba(232, 241, 247, .96)); border: 1px solid rgba(226, 232, 240, .8); border-radius: 22px; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .mzya-service-item { align-items: center; display: flex; gap: .9rem; min-width: 0; } @media (max-width: 1023px) { .mzya-service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .mzya-service-strip { grid-template-columns: 1fr; } } .mzya-service-icon { align-items: center; background: #fff; border-radius: 999px; box-shadow: 0 8px 20px rgba(15, 23, 42, .08); color: #2c5792; display: inline-flex; height: 48px; justify-content: center; width: 48px; } .mzya-public-trust-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mzya-public-trust-card { background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid rgba(226, 232, 240, .95); border-radius: 18px; box-shadow: 0 14px 30px rgba(15, 23, 42, .045); display: flex; gap: .85rem; min-width: 0; padding: 1rem; } .mzya-public-trust-icon { align-items: center; border-radius: 14px; display: inline-flex; flex: 0 0 42px; height: 42px; justify-content: center; width: 42px; } .mzya-public-trust-card.is-blue .mzya-public-trust-icon { background: rgba(45, 88, 147, .10); color: #2d5893; } .mzya-public-trust-card.is-teal .mzya-public-trust-icon { background: rgba(98, 142, 146, .13); color: #628e92; } .mzya-public-trust-card.is-gold .mzya-public-trust-icon { background: rgba(228, 162, 36, .15); color: #b7791f; } .mzya-public-trust-card.is-emerald .mzya-public-trust-icon { background: rgba(16, 185, 129, .12); color: #059669; } .mzya-policy-text, .mzya-public-description { overflow-wrap: anywhere; white-space: normal; } .mzya-public-policy-card { border: 1px solid rgba(226, 232, 240, .95); border-radius: 16px; background: #fbfdff; padding: 1rem; } .mzya-social-links { display: flex; flex-wrap: wrap; gap: .65rem; } .mzya-social-link { align-items: center; border: 1px solid rgba(203, 213, 225, .9); border-radius: 999px; color: #2d5893; display: inline-flex; font-size: .84rem; font-weight: 800; gap: .45rem; padding: .55rem .85rem; transition: all .18s ease; } .mzya-social-link:hover { border-color: rgba(45, 88, 147, .35); background: #f8fafc; transform: translateY(-1px); } @media (max-width: 1023px) { .mzya-public-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .mzya-public-trust-grid { grid-template-columns: 1fr; } } .mzya-cta-panel { align-items: center; background: linear-gradient(90deg, rgba(226, 240, 255, 1), rgba(216, 234, 255, 1)); border-radius: 24px; box-shadow: 0 18px 42px rgba(44, 87, 146, .12); display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) auto; } .mzya-cta-actions { display: grid; gap: .85rem; grid-template-columns: repeat(3, minmax(155px, 1fr)); min-width: min(100%, 650px); } .mzya-cta-action { align-items: center; background: #fff; border: 1px solid rgb(227 226 222); border-radius: 14px; color: #1e3a5f; display: inline-flex; font-size: .9rem; font-weight: 850; gap: .65rem; justify-content: center; min-height: 54px; padding: .75rem 1rem; text-align: center; } .mzya-cta-phone { background: #174a82; border-color: #174a82; color: #fff; } .mzya-cta-action svg { flex: 0 0 auto; } @media (max-width: 1100px) { .mzya-public-trust-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mzya-public-trust-card { background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid rgba(226, 232, 240, .95); border-radius: 18px; box-shadow: 0 14px 30px rgba(15, 23, 42, .045); display: flex; gap: .85rem; min-width: 0; padding: 1rem; } .mzya-public-trust-icon { align-items: center; border-radius: 14px; display: inline-flex; flex: 0 0 42px; height: 42px; justify-content: center; width: 42px; } .mzya-public-trust-card.is-blue .mzya-public-trust-icon { background: rgba(45, 88, 147, .10); color: #2d5893; } .mzya-public-trust-card.is-teal .mzya-public-trust-icon { background: rgba(98, 142, 146, .13); color: #628e92; } .mzya-public-trust-card.is-gold .mzya-public-trust-icon { background: rgba(228, 162, 36, .15); color: #b7791f; } .mzya-public-trust-card.is-emerald .mzya-public-trust-icon { background: rgba(16, 185, 129, .12); color: #059669; } .mzya-policy-text, .mzya-public-description { overflow-wrap: anywhere; white-space: normal; } .mzya-public-policy-card { border: 1px solid rgba(226, 232, 240, .95); border-radius: 16px; background: #fbfdff; padding: 1rem; } .mzya-social-links { display: flex; flex-wrap: wrap; gap: .65rem; } .mzya-social-link { align-items: center; border: 1px solid rgba(203, 213, 225, .9); border-radius: 999px; color: #2d5893; display: inline-flex; font-size: .84rem; font-weight: 800; gap: .45rem; padding: .55rem .85rem; transition: all .18s ease; } .mzya-social-link:hover { border-color: rgba(45, 88, 147, .35); background: #f8fafc; transform: translateY(-1px); } @media (max-width: 1023px) { .mzya-public-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .mzya-public-trust-grid { grid-template-columns: 1fr; } } .mzya-cta-panel { grid-template-columns: 1fr; } .mzya-cta-actions { min-width: 0; width: 100%; } } @media (max-width: 700px) { .mzya-cta-actions { grid-template-columns: 1fr; } } .mzya-rating-stars { color: #e4a224; letter-spacing: .06em; } .mzya-mini-product-card { background: #fff; border: 1px solid rgba(226, 232, 240, .95); border-radius: 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, .04); display: grid; min-width: 0; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .mzya-mini-product-card:hover { border-color: rgba(44, 87, 146, .28); box-shadow: 0 16px 36px rgba(15, 23, 42, .08); transform: translateY(-2px); } .mzya-mini-product-media { aspect-ratio: 1 / 1.12; background: #f6f7f9; display: block; overflow: hidden; position: relative; } .mzya-mini-product-media img { height: 100%; object-fit: cover; transition: transform .28s ease; width: 100%; } .mzya-mini-product-card:hover .mzya-mini-product-media img { transform: scale(1.035); } .mzya-mini-product-body { background: #fff; display: grid; gap: .45rem; padding: .85rem; } .mzya-mini-product-title { color: #0f172a; display: -webkit-box; font-size: .88rem; font-weight: 700; line-height: 1.35; min-height: 38px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mzya-mini-product-price { color: #0f172a; font-size: 1rem; font-weight: 850; line-height: 1.2; } .mzya-mini-product-rating { color: #000000; font-size: .78rem; font-weight: 650; } .mzya-mini-product-action { align-items: center; border: 1px solid #2c5792; border-radius: 10px; color: #2c5792; display: inline-flex; font-size: .8rem; font-weight: 800; justify-content: center; margin-top: .3rem; min-height: 34px; padding: .45rem .75rem; transition: background .18s ease, color .18s ease; width: 100%; } .mzya-mini-product-action:hover { background: #2c5792; color: #fff; } .mzya-empty-card { background: #fff; border: 1px solid rgba(226, 232, 240, .95); border-radius: 18px; color: #000000; font-size: .92rem; padding: 1.25rem 1.5rem; text-align: center; } .mzya-products-panel-card { background: #fff; border: 1px solid rgba(226, 232, 240, .95); border-radius: 22px; box-shadow: 0 18px 42px rgba(15, 23, 42, .05); padding: 1rem; } .mzya-products-tools { align-items: center; display: grid; gap: .75rem; grid-template-columns: auto minmax(0, 1fr) auto; } .mzya-products-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(190px, 245px)); justify-content: start; } @media (min-width: 900px) { .mzya-products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 250px)); } } @media (min-width: 1280px) { .mzya-products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 255px)); } } @media (max-width: 767px) { .mzya-section-header { align-items: start; flex-direction: column; gap: .45rem; } .mzya-products-panel-card { padding: .75rem; } .mzya-products-tools { grid-template-columns: 1fr; } .mzya-products-grid { gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } } @media (max-width: 767px) { .mzya-home-products-grid .mzya-product-card .p-4 { padding: .75rem; } .mzya-home-products-grid .mzya-product-card h3 { font-size: .82rem; min-height: 38px; } .mzya-home-products-grid .mzya-product-card p { font-size: .82rem; } .mzya-storefront-hero-media { min-height: 520px; } .mzya-storefront-hero-overlay { background: linear-gradient(180deg, rgba(8, 15, 28, .25) 0%, rgba(8, 15, 28, .78) 100%); } .mzya-hero-action-main { grid-template-columns: 1fr; } .mzya-hero-action-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mzya-hero-actions { max-width: none; } } /* Step 2.5: polished seller hero layout */ .mzya-storefront-hero-media { min-height: 330px; } .mzya-storefront-hero .relative.z-10 { justify-content: flex-start; } .mzya-hero-layout { min-height: 280px; position: relative; padding-top: 20px; } .mzya-hero-brand-row { align-items: flex-start; display: flex; gap: 1.1rem; max-width: calc(100% - 330px); padding-top: .2rem; } [dir="rtl"] .mzya-hero-brand-row { flex-direction: row; margin-inline-start: 0; margin-inline-end: auto; text-align: right; } [dir="rtl"] .mzya-hero-title-row { justify-content: flex-start; } .mzya-hero-layout .mzya-storefront-logo-card { flex: 0 0 92px; height: 92px; padding: .65rem; width: 92px; } .mzya-hero-copy { min-width: 0; padding-top: .1rem; } .mzya-hero-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; } .mzya-hero-title { font-size: clamp(1.8rem, 2.25vw, 2.45rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.02; } .mzya-hero-verified { align-items: center; background: rgba(44, 87, 146, .95); border-radius: 999px; color: #fff; display: inline-flex; height: 24px; justify-content: center; width: 24px; } .mzya-hero-tagline { color: rgba(255, 255, 255, .95); font-size: .96rem; font-weight: 750; margin-top: .55rem; } .mzya-hero-description { color: rgba(255, 255, 255, .88); display: -webkit-box; font-size: .88rem; line-height: 1.65; margin-top: .85rem; max-width: 720px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .mzya-hero-trust-row { bottom: 0; display: flex; flex-wrap: wrap; gap: .48rem; inset-inline-start: 0; max-width: calc(100% - 315px); position: absolute; } .mzya-pill { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); font-size: .72rem; font-weight: 500; gap: .38rem; padding: .38rem .58rem; } .mzya-hero-actions { gap: .48rem; inset-inline-end: 0; max-width: 285px; position: absolute; top: .25rem; width: 285px; padding-top: 20px; } .mzya-hero-action-main, .mzya-hero-action-secondary { gap: .42rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mzya-store-primary-btn, .mzya-store-secondary-btn, .mzya-store-soft-btn { margin-top: 12px; border: 0; background: #2d5893; color: #fff; border-radius: 14px; padding: 9px 13px; font-size: 13px; font-weight: 900; cursor: pointer; text-transform: uppercase; } .mzya-hero-actions .mzya-store-soft-btn { min-height: 31px; padding: .42rem .55rem; } .mzya-hero-rating-card { bottom: 0; inset-inline-end: 0; padding: .52rem .7rem; position: absolute; width: 285px; } .mzya-hero-rating-value { font-size: 1.15rem; font-weight: 850; } .mzya-hero-rating-link { font-size: .68rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } @media (min-width: 768px) and (max-width: 1179px) { .mzya-hero-brand-row { max-width: none; padding-inline-end: 0; } .mzya-hero-layout { min-height: 390px; } .mzya-hero-actions { bottom: 3.5rem; max-width: 420px; top: auto; width: 420px; } .mzya-hero-trust-row { max-width: calc(100% - 290px); } .mzya-hero-rating-card { width: 270px; } } @media (max-width: 767px) { .mzya-storefront-hero-media { min-height: 620px; } .mzya-storefront-hero .relative.z-10 { min-height: 620px; } .mzya-hero-layout { display: grid; gap: 1rem; min-height: 0; } .mzya-hero-brand-row { gap: .85rem; max-width: none; } .mzya-hero-layout .mzya-storefront-logo-card { flex-basis: 78px; height: 78px; padding: .5rem; width: 78px; } .mzya-hero-title { font-size: 1.55rem; } .mzya-hero-tagline { font-size: .88rem; } .mzya-hero-description { font-size: .82rem; -webkit-line-clamp: 5; } .mzya-hero-actions, .mzya-hero-trust-row, .mzya-hero-rating-card { inset: auto; max-width: none; position: static; width: 100%; } .mzya-hero-action-main, .mzya-hero-action-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mzya-store-primary-btn, .mzya-store-secondary-btn, .mzya-store-soft-btn { font-size: .68rem; } .mzya-hero-trust-row { margin-top: .1rem; } } /* Hero icon-only actions */ .mzya-hero-actions { align-items: flex-end; display: flex; flex-direction: column; gap: .5rem; inset-inline-end: 0; max-width: 340px; position: absolute; top: .25rem; width: auto; } .mzya-hero-action-main { align-items: center; display: flex; flex-wrap: nowrap; gap: .42rem; justify-content: flex-end; max-width: none; width: max-content; } .mzya-hero-action-main>* { flex: 0 0 auto; } .mzya-hero-action-secondary { align-items: center; display: flex; flex-wrap: nowrap; gap: .42rem; justify-content: flex-end; max-width: none; width: max-content; } .mzya-hero-action-secondary>* { flex: 0 0 auto; } .mzya-hero-actions form { margin: 0; } .mzya-hero-icon-btn { align-items: center; backdrop-filter: blur(14px); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; color: #fff; display: inline-flex; flex: 0 0 34px; height: 34px; justify-content: center; position: relative; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; width: 34px; } .mzya-hero-icon-btn:hover, .mzya-hero-icon-btn:focus-visible { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .55); box-shadow: 0 14px 28px rgba(0, 0, 0, .18); transform: translateY(-1px); } .mzya-hero-icon-btn.is-primary { background: #e4a224; border-color: rgba(228, 162, 36, .95); color: #111827; } .mzya-hero-icon-btn.is-primary:hover, .mzya-hero-icon-btn.is-primary:focus-visible { background: #d99618; } .mzya-hero-icon-btn.is-light { background: rgba(255, 255, 255, .95); border-color: rgba(255, 255, 255, .95); color: #111827; } .mzya-hero-icon-btn svg { height: 18px; width: 18px; } .mzya-hero-icon-btn::after { background: rgba(15, 23, 42, .96); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: #fff; content: attr(data-tooltip); font-size: .68rem; font-weight: 700; inset-inline-end: 0; opacity: 0; padding: .38rem .55rem; pointer-events: none; position: absolute; top: calc(100% + .4rem); transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; white-space: nowrap; z-index: 30; } .mzya-hero-icon-btn:hover::after, .mzya-hero-icon-btn:focus-visible::after { opacity: 1; transform: translateY(0); } .mzya-hero-icon-btn.is-disabled, .mzya-hero-icon-btn:disabled { cursor: not-allowed; opacity: .55; } @media (max-width: 767px) { .mzya-hero-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; inset: auto; max-width: none; position: static; width: 100%; } .mzya-hero-action-main, .mzya-hero-action-secondary { flex-wrap: wrap; justify-content: flex-start; width: 100%; } .mzya-hero-icon-btn { flex: 0 0 40px; height: 40px; width: 40px; } } .mzya-cta-phone { justify-content: space-between; text-align: start; } .mzya-cta-phone-main { align-items: center; display: inline-flex; gap: .65rem; min-width: 0; } .mzya-cta-phone-text { display: inline-flex; flex-direction: column; line-height: 1.2; min-width: 0; } .mzya-cta-phone-value { direction: ltr; letter-spacing: .06em; unicode-bidi: isolate; } .mzya-cta-phone-eye { align-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; transition: background .18s ease, transform .18s ease; width: 34px; } .mzya-cta-phone:hover .mzya-cta-phone-eye { background: rgba(255, 255, 255, .24); transform: scale(1.04); } /* Phase 1F.5: storefront content mobile / RTL polish. */ .mzya-storefront-content, .seller-tab-panel, .mzya-store-card, .mzya-products-grid, .mzya-home-products-grid, .mzya-public-trust-grid { min-width: 0; } [dir="rtl"] .mzya-section-header, [dir="rtl"] .mzya-public-trust-card, [dir="rtl"] .mzya-service-item { text-align: right; } [dir="rtl"] .mzya-section-link span[aria-hidden="true"] { transform: rotate(180deg); } @media (max-width: 767px) { .mzya-storefront-page-wrap { padding-bottom: 2.5rem !important; margin-top: 0 !important; } .seller-tab-panel { margin-top: 1rem !important; } .mzya-store-card, .seller-tab-panel { border-radius: 18px !important; padding: 1rem !important; } .mzya-section-header { align-items: flex-start !important; flex-direction: column !important; gap: .45rem !important; margin-bottom: .85rem !important; } .mzya-section-title { font-size: 1.08rem !important; line-height: 1.2 !important; } .mzya-section-subtitle, .mzya-section-link, .mzya-section-header p { font-size: .78rem !important; line-height: 1.45 !important; } .mzya-products-grid, .mzya-home-products-grid { display: grid !important; gap: .8rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; } .mzya-products-grid > *, .mzya-home-products-grid > * { min-width: 0 !important; width: 100% !important; } .mzya-products-grid .product-card, .mzya-home-products-grid .product-card, .mzya-products-grid [class*="product-card"], .mzya-home-products-grid [class*="product-card"] { max-width: 100% !important; } .mzya-service-strip, .mzya-public-trust-grid, #seller-panel-shipping .grid, #seller-panel-about .grid { grid-template-columns: 1fr !important; } .mzya-service-strip { padding: .9rem !important; } .mzya-service-item, .mzya-public-trust-card { align-items: flex-start !important; gap: .7rem !important; } .mzya-public-trust-card { padding: .85rem !important; } .mzya-public-trust-icon { flex-basis: 36px !important; height: 36px !important; width: 36px !important; } #seller-panel-shipping .rounded-2xl, #seller-panel-shipping .rounded-xl, #seller-panel-about .rounded-xl, #seller-panel-contact .rounded-xl, #seller-panel-reviews .rounded-xl { border-radius: 14px !important; } #seller-panel-shipping article, #seller-panel-shipping section, #seller-panel-about details, #seller-panel-about > div > div, #seller-panel-contact form, #seller-panel-contact .rounded-xl { padding: .9rem !important; } #seller-panel-shipping .inline-flex.shrink-0 { flex: 0 0 auto !important; max-width: 100% !important; white-space: normal !important; } .mzya-policy-text, .mzya-public-description, #seller-panel-shipping p, #seller-panel-about p { overflow-wrap: anywhere !important; word-break: normal !important; } .mzya-social-links { gap: .45rem !important; } .mzya-social-link { font-size: .78rem !important; padding: .48rem .7rem !important; } } /* Phase 1F RTL + About polish. Use physical left/right, not logical inline-start/end, because inline-start is right in RTL. */ [dir="rtl"] .mzya-storefront-hero .mzya-hero-actions, html[lang="ar"] .mzya-storefront-hero .mzya-hero-actions, body[lang="ar"] .mzya-storefront-hero .mzya-hero-actions, .mzya-storefront-hero:dir(rtl) .mzya-hero-actions { left: 0 !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; align-items: flex-start !important; direction: rtl !important; } [dir="rtl"] .mzya-storefront-hero .mzya-hero-action-main, [dir="rtl"] .mzya-storefront-hero .mzya-hero-action-secondary, html[lang="ar"] .mzya-storefront-hero .mzya-hero-action-main, html[lang="ar"] .mzya-storefront-hero .mzya-hero-action-secondary, body[lang="ar"] .mzya-storefront-hero .mzya-hero-action-main, body[lang="ar"] .mzya-storefront-hero .mzya-hero-action-secondary, .mzya-storefront-hero:dir(rtl) .mzya-hero-action-main, .mzya-storefront-hero:dir(rtl) .mzya-hero-action-secondary { justify-content: flex-start !important; } [dir="rtl"] .mzya-storefront-hero .mzya-hero-rating-card, html[lang="ar"] .mzya-storefront-hero .mzya-hero-rating-card, body[lang="ar"] .mzya-storefront-hero .mzya-hero-rating-card, .mzya-storefront-hero:dir(rtl) .mzya-hero-rating-card { left: 0 !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; } [dir="ltr"] .mzya-storefront-hero .mzya-hero-actions, html[lang="fr"] .mzya-storefront-hero .mzya-hero-actions, html[lang="en"] .mzya-storefront-hero .mzya-hero-actions, body[lang="fr"] .mzya-storefront-hero .mzya-hero-actions, body[lang="en"] .mzya-storefront-hero .mzya-hero-actions, .mzya-storefront-hero:dir(ltr) .mzya-hero-actions { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: auto !important; align-items: flex-end !important; direction: ltr !important; } [dir="ltr"] .mzya-storefront-hero .mzya-hero-rating-card, html[lang="fr"] .mzya-storefront-hero .mzya-hero-rating-card, html[lang="en"] .mzya-storefront-hero .mzya-hero-rating-card, body[lang="fr"] .mzya-storefront-hero .mzya-hero-rating-card, body[lang="en"] .mzya-storefront-hero .mzya-hero-rating-card, .mzya-storefront-hero:dir(ltr) .mzya-hero-rating-card { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: auto !important; } #seller-panel-about .mzya-about-plain-card, #seller-panel-about .mzya-about-plain-card h3, #seller-panel-about .mzya-about-plain-card p { direction: inherit; text-align: inherit; } #seller-panel-about .mzya-about-plain-card p { white-space: normal; word-break: break-word; } @media (max-width: 767px) { [dir="rtl"] .mzya-storefront-hero .mzya-hero-actions, html[lang="ar"] .mzya-storefront-hero .mzya-hero-actions, body[lang="ar"] .mzya-storefront-hero .mzya-hero-actions, .mzya-storefront-hero:dir(rtl) .mzya-hero-actions, [dir="ltr"] .mzya-storefront-hero .mzya-hero-actions, html[lang="fr"] .mzya-storefront-hero .mzya-hero-actions, html[lang="en"] .mzya-storefront-hero .mzya-hero-actions, body[lang="fr"] .mzya-storefront-hero .mzya-hero-actions, body[lang="en"] .mzya-storefront-hero .mzya-hero-actions, .mzya-storefront-hero:dir(ltr) .mzya-hero-actions { left: auto !important; right: auto !important; inset: auto !important; position: static !important; width: 100% !important; } } /* Final direction lock for hero controls. */ @media (min-width: 768px) { .container[dir="ltr"] .mzya-storefront-hero .mzya-hero-actions, .container[dir="ltr"] .mzya-storefront-hero .mzya-hero-rating-card { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: auto !important; } .container[dir="rtl"] .mzya-storefront-hero .mzya-hero-actions, .container[dir="rtl"] .mzya-storefront-hero .mzya-hero-rating-card { left: 0 !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; } .container[dir="ltr"] .mzya-storefront-hero .mzya-hero-rating-card { text-align: left !important; } .container[dir="rtl"] .mzya-storefront-hero .mzya-hero-rating-card { text-align: right !important; direction: rtl !important; } } @media (max-width: 767px) { .container[dir="ltr"] .mzya-storefront-hero .mzya-hero-actions, .container[dir="rtl"] .mzya-storefront-hero .mzya-hero-actions, .container[dir="ltr"] .mzya-storefront-hero .mzya-hero-rating-card, .container[dir="rtl"] .mzya-storefront-hero .mzya-hero-rating-card { left: auto !important; right: auto !important; inset: auto !important; } } /* Phase 9X8 — desktop home mini-site polish */ .mzya-home-products-showcase { position: relative; overflow: hidden; } .mzya-home-products-showcase::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: linear-gradient(90deg, #628e92, #2d5893, #e4a224); opacity: .9; } .mzya-home-products-head { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .35rem; padding-top: .35rem; } .mzya-home-products-subtitle { color: #475569; max-width: 720px; } .mzya-home-products-actions { align-items: center; display: flex; flex: 0 0 auto; justify-content: flex-end; } .mzya-home-primary-link { align-items: center; background: #2d5893; border: 1px solid rgba(45, 88, 147, .25); box-shadow: 0 12px 26px rgba(45, 88, 147, .18); color: #fff; display: inline-flex; font-size: .84rem; font-weight: 600; gap: .4rem; min-height: 38px; padding: .55rem 1rem; white-space: nowrap; text-transform: uppercase; border-radius: 8px; } .mzya-home-primary-link:hover { background: #244874; transform: translateY(-1px); } .mzya-home-products-showcase .mzya-products-grid { gap: 1.05rem; margin-top: .85rem; } @media (min-width: 1180px) { .mzya-home-products-showcase .mzya-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; } } @media (min-width: 1500px) { .mzya-home-products-showcase .mzya-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .mzya-home-products-note { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; width: max-content; max-width: calc(100% - 32px); margin: 18px auto 0 !important; padding: .72rem 1.2rem; border: 0 !important; border-radius: 999px; background: transparent !important; color: #315a62; font-size: .82rem; font-weight: 700; line-height: 1.55; text-align: center; text-transform: uppercase; box-shadow: 0 10px 24px rgba(45, 88, 147, .08); } /* Moving neon border */ .mzya-home-products-note::before { content: ""; position: absolute; inset: -220%; z-index: -2; background: conic-gradient( from 0deg, transparent 0deg, transparent 245deg, rgba(228, 162, 36, .95) 275deg, rgba(98, 142, 146, .95) 300deg, rgba(45, 88, 147, .95) 325deg, transparent 350deg, transparent 360deg ); animation: mzya-note-neon-spin 3.5s linear infinite; } /* Inner surface */ .mzya-home-products-note::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: linear-gradient( 90deg, rgba(255, 255, 255, .96), rgba(248, 252, 252, .92) ); box-shadow: inset 0 0 14px rgba(98, 142, 146, .10), 0 0 18px rgba(228, 162, 36, .18); } @keyframes mzya-note-neon-spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .mzya-home-products-note { width: calc(100% - 24px); max-width: calc(100% - 24px); margin-top: 16px !important; padding: .68rem .9rem; font-size: .78rem; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .mzya-home-products-note::before { animation: none; } } .mzya-home-service-strip { box-shadow: 0 16px 34px rgba(15, 23, 42, .055); padding-block: 1.05rem !important; } .mzya-home-service-strip .mzya-service-item { border-inline-end: 1px solid rgba(148, 163, 184, .22); padding-inline: .35rem .8rem; } .mzya-home-service-strip .mzya-service-item:last-child { border-inline-end: 0; } .mzya-home-service-strip .mzya-service-icon { background: linear-gradient(180deg, #fff, #f8fafc); color: #2d5893; height: 42px; width: 42px; } .mzya-home-trust-section { background: radial-gradient(circle at top left, rgba(228, 162, 36, .10), transparent 34%), radial-gradient(circle at bottom right, rgba(98, 142, 146, .10), transparent 36%), #fff; } .mzya-home-trust-section .mzya-public-trust-grid { gap: .85rem; } .mzya-home-trust-section .mzya-public-trust-card { align-items: flex-start; border-color: rgba(203, 213, 225, .72); box-shadow: 0 12px 26px rgba(15, 23, 42, .04); padding: .9rem; } .mzya-home-story-grid .mzya-store-card { box-shadow: 0 16px 38px rgba(15, 23, 42, .045); } .mzya-home-about-card { min-height: 240px; } .mzya-home-about-card img { filter: saturate(.95) contrast(.98); } .mzya-home-shipping-card .rounded-2xl { background: #fbfdff; transition: border-color .18s ease, transform .18s ease; } .mzya-home-shipping-card .rounded-2xl:hover { border-color: rgba(45, 88, 147, .22); transform: translateY(-1px); } .mzya-home-reviews-card { background: linear-gradient(180deg, #fff, #fbfdff); } .mzya-home-reviews-card .mzya-store-card { background: rgba(248, 250, 252, .72); border-style: dashed; color: #475569; } .mzya-home-contact-cta { background: linear-gradient(135deg, #fff 0%, #fff 58%, rgba(228, 162, 36, 0.13) 100%); border: 1px solid rgb(228 232 237); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04); } .mzya-home-contact-cta .mzya-cta-action { background: #fff; box-shadow: 0 10px 24px rgba(45, 88, 147, .10); } @media (max-width: 1023px) { .mzya-home-products-head { flex-direction: column; } .mzya-home-products-actions { justify-content: flex-start; width: 100%; } .mzya-home-service-strip .mzya-service-item { border-inline-end: 0; padding-inline: 0; } } @media (max-width: 767px) { .mzya-home-products-showcase::before { height: 4px; } .mzya-home-primary-link { min-height: 36px; padding: .5rem .85rem; } .mzya-home-products-note { font-size: .78rem; } } /* Phase 9X9: desktop product catalog polish */ .mzya-catalog-panel { padding: 1.25rem !important; } .mzya-catalog-head { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; padding: .2rem .1rem .95rem; border-bottom: 1px solid rgba(226, 232, 240, .82); } .mzya-catalog-head__copy { max-width: 760px; min-width: 0; } .mzya-catalog-kicker { color: var(--mzya-teal, #628e92); font-size: .72rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; margin: 0 0 .22rem; text-transform: uppercase; } .mzya-catalog-title { color: #0f315f; font-size: clamp(1.1rem, 1.4vw, 1.45rem); font-weight: 950; letter-spacing: -.025em; line-height: 1.1; margin: 0; } .mzya-catalog-subtitle { color: #64748b; font-size: .84rem; font-weight: 650; line-height: 1.55; margin: .45rem 0 0; max-width: 720px; } .mzya-catalog-count { align-items: center; background: linear-gradient(135deg, rgba(98, 142, 146, .12), rgba(45, 88, 147, .08)); border: 1px solid rgba(98, 142, 146, .22); border-radius: 999px; color: #244766; display: inline-flex; flex: 0 0 auto; gap: .32rem; padding: .42rem .75rem; white-space: nowrap; } .mzya-catalog-count strong { color: #0f315f; font-size: .95rem; font-weight: 950; } .mzya-catalog-count span { font-size: .76rem; font-weight: 850; } .mzya-catalog-tools { align-items: center !important; display: flex !important; gap: .75rem !important; justify-content: space-between !important; margin-bottom: 1rem; } .mzya-catalog-filter-btn { height: 2.5rem !important; padding-inline: 1rem !important; font-weight: 850 !important; } .mzya-catalog-toolbar { align-items: center; display: flex; justify-content: flex-end; } .mzya-catalog-panel .mzya-products-grid { gap: 1rem !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; justify-content: stretch !important; margin-top: 1rem !important; } .mzya-catalog-panel .mzya-products-grid > * { min-width: 0 !important; width: 100% !important; } .mzya-catalog-panel .product-card, .mzya-catalog-panel [class*="product-card"] { max-width: 100% !important; } .mzya-catalog-soft-note { background: linear-gradient(135deg, rgba(248, 250, 252, .96), rgba(239, 246, 255, .76)); border: 1px solid rgba(226, 232, 240, .92); border-radius: 14px; color: #64748b; font-size: .82rem; font-weight: 750; line-height: 1.45; margin: 1.2rem 0 0; padding: .8rem 1rem; text-align: center; } [dir="rtl"] .mzya-catalog-head, [dir="rtl"] .mzya-catalog-head__copy, [dir="rtl"] .mzya-catalog-soft-note { text-align: right; } [dir="rtl"] .mzya-catalog-tools { flex-direction: row-reverse; } } @media (min-width: 1240px) { .mzya-catalog-panel .mzya-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .mzya-catalog-head { border-bottom: 1px solid rgba(226, 232, 240, .82); margin-bottom: .85rem; padding-bottom: .85rem; } .mzya-catalog-kicker { color: var(--mzya-teal, #628e92); font-size: .68rem; font-weight: 900; letter-spacing: .07em; margin-bottom: .2rem; text-transform: uppercase; } .mzya-catalog-title { color: #0f315f; font-size: 1.05rem; font-weight: 950; line-height: 1.15; } .mzya-catalog-subtitle, .mzya-catalog-count, .mzya-catalog-soft-note { display: none !important; } .mzya-catalog-tools { display: grid !important; gap: .7rem !important; grid-template-columns: 1fr !important; } } /* Phase 9X10 — unify desktop tab section headers with home showcase style */ .mzya-tab-products-showcase { margin-top: 0; } .mzya-tab-products-showcase .mzya-home-products-head { border-bottom: 0 !important; margin-bottom: .35rem !important; padding: .35rem 0 0 !important; } .mzya-tab-products-showcase .mzya-section-kicker { align-items: center; color: #c96f18; display: inline-flex; gap: .45rem; } .mzya-tab-products-showcase .mzya-section-kicker::before { background: #e4a224; border-radius: 999px; content: ""; display: inline-block; height: .46rem; width: .46rem; } .mzya-tab-products-showcase .mzya-section-title { color: #0f315f; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 950; letter-spacing: -.035em; line-height: 1.08; margin: .18rem 0 0; text-transform: uppercase; } .mzya-tab-products-showcase .mzya-home-products-subtitle { color: #475569; font-size: .96rem; line-height: 1.65; margin-top: .7rem; max-width: 100%; font-style: italic; } .mzya-tab-products-showcase .mzya-catalog-count { margin-top: .2rem; } .mzya-tab-products-showcase .mzya-catalog-tools { border-top: 1px solid rgba(226, 232, 240, .72); margin-top: 1.15rem; padding-top: 1rem; } .mzya-tab-products-showcase .mzya-products-grid { margin-top: 1rem !important; } [dir="rtl"] .mzya-tab-products-showcase .mzya-section-kicker::before { order: 2; } @media (max-width: 767px) { .mzya-tab-products-showcase .mzya-section-title { font-size: 1.12rem; } .mzya-tab-products-showcase .mzya-home-products-subtitle { display: none; } .mzya-tab-products-showcase .mzya-home-products-head { gap: .75rem; } } /* Phase 9X11 — unify content tabs with the premium showcase header style */ .mzya-content-tab-showcase { margin-top: 1.25rem !important; box-shadow: 0 18px 45px rgba(15, 23, 42, .045); } .mzya-content-tab-showcase .mzya-content-tab-head { margin-bottom: 1.1rem; padding-top: .35rem; } .mzya-content-tab-showcase .mzya-section-kicker { align-items: center; color: #c96f18; display: inline-flex; gap: .45rem; } .mzya-content-tab-showcase .mzya-section-kicker::before { background: #e4a224; border-radius: 999px; content: ""; display: inline-block; height: .46rem; width: .46rem; } .mzya-content-tab-showcase .mzya-section-title { color: #0f315f; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 950; letter-spacing: -.035em; line-height: 1.08; margin: .18rem 0 0; text-transform: uppercase; } .mzya-content-tab-showcase .mzya-home-products-subtitle { color: #475569; font-size: .96rem; font-style: italic; line-height: 1.65; margin-top: .7rem; max-width: 100%; } .mzya-content-tab-showcase > .mt-4:first-of-type, .mzya-content-tab-showcase > .mt-5:first-of-type { margin-top: 1rem !important; } .mzya-content-tab-showcase article, .mzya-content-tab-showcase .mzya-about-plain-card, .mzya-content-tab-showcase form, .mzya-content-tab-showcase .rounded-xl, .mzya-content-tab-showcase .rounded-2xl { border-color: rgba(226, 232, 240, .9); } .mzya-content-tab-showcase .mzya-about-plain-card, .mzya-content-tab-showcase .bg-zinc-50, .mzya-content-tab-showcase .bg-\[\#fbfdfd\] { background: linear-gradient(180deg, #fff, #fbfdff) !important; } [dir="rtl"] .mzya-content-tab-showcase .mzya-content-tab-head, [dir="rtl"] .mzya-content-tab-showcase .mzya-home-products-subtitle { text-align: right; } [dir="rtl"] .mzya-content-tab-showcase .mzya-section-kicker::before { order: 2; } @media (max-width: 767px) { .mzya-content-tab-showcase { margin-top: 1rem !important; } .mzya-content-tab-showcase .mzya-section-title { font-size: 1.12rem; } .mzya-content-tab-showcase .mzya-home-products-subtitle { display: none; } } /* ========================================================= SELLER STOREFRONT PRODUCT CARD ACTIONS - MATCH SHARED CARD Scope: /seller/{slug} grids only. Keeps shared product card markup. ========================================================= */ .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__title-row, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__title-row, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__title-row, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__title-row, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__title-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; min-height: 43px !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__name, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__name, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__name, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__name, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__name { flex: 1 1 auto !important; min-width: 0 !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__rating-pill, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__rating-pill, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__rating-pill, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__rating-pill, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__rating-pill { align-self: flex-start !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 3px !important; min-width: 22px !important; min-height: 20px !important; height: 20px !important; margin: 1px 0 0 !important; padding: 0 5px !important; border-radius: 999px !important; background: #f3f4f6 !important; color: #b8c0cc !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__rating-pill:not(.is-empty), .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__rating-pill:not(.is-empty), .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__rating-pill:not(.is-empty), .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__rating-pill:not(.is-empty), .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__rating-pill:not(.is-empty) { background: #fff8e6 !important; color: #f59e0b !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__rating-star, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__rating-star, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__rating-star, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__rating-star, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__rating-star { color: inherit !important; font-size: 13px !important; line-height: 1 !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta-wrap, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta-wrap, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta-wrap, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta-wrap, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 7px !important; margin-top: 10px !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__action-button, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__action-button, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__action-button, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__action-button, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__action-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-height: 38px !important; padding: 0 8px !important; border-radius: 10px !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .01em !important; text-decoration: none !important; text-transform: uppercase !important; white-space: nowrap !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__details, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__details, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__details, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__details, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__details { border: 1px solid rgba(44, 87, 146, .42) !important; background: #ffffff !important; color: var(--mzya-blue, #2c5792) !important; box-shadow: none !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta { border: 1px solid var(--mzya-blue, #2c5792) !important; background: var(--mzya-blue, #2c5792) !important; color: #ffffff !important; box-shadow: 0 10px 22px rgba(44, 87, 146, .18) !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta.is-configurable, .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta.is-unavailable, .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta.is-disabled, .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__cta:disabled, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta.is-configurable, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta.is-unavailable, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta.is-disabled, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__cta:disabled, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta.is-configurable, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta.is-unavailable, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta.is-disabled, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__cta:disabled, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta.is-configurable, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta.is-unavailable, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta.is-disabled, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__cta:disabled, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta.is-configurable, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta.is-unavailable, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta.is-disabled, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__cta:disabled { cursor: not-allowed !important; border-color: #e5e7eb !important; background: #eef1f5 !important; color: rgba(255, 255, 255, .95) !important; box-shadow: none !important; } .mzya-storefront-page-wrap .mzya-products-grid .mzya-product-card__button-icon, .mzya-storefront-page-wrap .mzya-home-products-grid .mzya-product-card__button-icon, .mzya-storefront-page-wrap .mzya-home-products-showcase .mzya-product-card__button-icon, .mzya-storefront-page-wrap .mzya-tab-products-showcase .mzya-product-card__button-icon, .mzya-storefront-page-wrap .seller-tab-panel .mzya-products-grid .mzya-product-card__button-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; line-height: 1 !important; } /* Seller storefront product grid: wrapper prevents Vue fragment marker text node from becoming a layout item Reason: v-product-card renders a Vue fragment marker text node (shown as ￿ in DevTools). The wrapper keeps that marker inside the product item so it no longer reserves an empty grid column. */ .mzya-products-grid > .mzya-seller-product-grid-item { min-width: 0 !important; align-self: stretch !important; } .mzya-products-grid > .mzya-seller-product-grid-item > .mzya-product-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; } .mzya-home-products-showcase .mzya-products-grid > .mzya-seller-product-grid-item, .mzya-catalog-panel .mzya-products-grid > .mzya-seller-product-grid-item, .mzya-tab-products-showcase .mzya-products-grid > .mzya-seller-product-grid-item { min-width: 0 !important; } /* Product card polish: edge-to-edge image + opposite price alignment */ html[dir="ltr"] .mzya-product-card__price, html:not([dir="rtl"]) .mzya-product-card__price { align-items: flex-end !important; text-align: right !important; } html[dir="ltr"] .mzya-product-card__price-line, html:not([dir="rtl"]) .mzya-product-card__price-line { justify-content: flex-end !important; } html[dir="rtl"] .mzya-product-card__price { align-items: flex-start !important; text-align: left !important; } html[dir="rtl"] .mzya-product-card__price-line { justify-content: flex-start !important; } .mzya-product-card__media { margin: 0 0 12px 0 !important; border-radius: 10px 10px 8px 8px !important; } .mzya-product-card__image-link, .mzya-product-card__media a { border-radius: inherit !important; overflow: hidden !important; } .mzya-product-card__image, .mzya-product-card__media img { border-radius: inherit !important; } /* ========================================================= MZYA SELLER STOREFRONT REVIEWS - SAFE STAR ICONS Fixes broken mojibake stars like ★ ========================================================= */ .mzya-home-reviews-preview__stars { display: inline-flex !important; align-items: center !important; gap: 3px !important; direction: ltr !important; unicode-bidi: isolate !important; } .mzya-home-reviews-preview__stars > span { display: inline-block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; overflow: hidden !important; color: #d0d5dd !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important; } .mzya-home-reviews-preview__stars > span::before { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; background: currentColor !important; text-indent: 0 !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021%2012%2017.27z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021%2012%2017.27z'/%3E%3C/svg%3E") !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; } .mzya-home-reviews-preview__stars > span.is-active { color: #f59e0b !important; } /* ========================================================= MZYA SELLER STORE TABLET FIT - CONTENT START Tablet only: 768px–1023px. Keeps phone and desktop layouts unchanged. ========================================================= */ @media (min-width: 768px) and (max-width: 1179px) { .mzya-storefront-page-wrap { max-width: 100% !important; overflow-x: hidden !important; padding-left: .85rem !important; padding-right: .85rem !important; } .mzya-storefront-content, .seller-tab-panel, .mzya-store-card, .mzya-home-products-showcase, .mzya-tab-products-showcase, .mzya-catalog-panel, .mzya-content-tab-showcase { max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .mzya-store-card, .seller-tab-panel, .mzya-home-products-showcase, .mzya-tab-products-showcase, .mzya-catalog-panel, .mzya-content-tab-showcase { border-radius: 18px !important; } .mzya-home-products-head, .mzya-catalog-head, .mzya-content-tab-head, .mzya-section-header { gap: .8rem !important; margin-bottom: .9rem !important; } .mzya-section-kicker, .mzya-catalog-kicker { font-size: .68rem !important; letter-spacing: .06em !important; } .mzya-section-title, .mzya-catalog-title { font-size: 1.35rem !important; line-height: 1.15 !important; } .mzya-home-products-subtitle, .mzya-catalog-subtitle, .mzya-section-subtitle { font-size: .82rem !important; line-height: 1.45 !important; } .mzya-products-grid, .mzya-home-products-grid, .mzya-catalog-panel .mzya-products-grid, .mzya-home-products-showcase .mzya-products-grid, .mzya-tab-products-showcase .mzya-products-grid, .seller-tab-panel .mzya-products-grid { align-items: start !important; display: grid !important; gap: .9rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } .mzya-products-grid > *, .mzya-home-products-grid > *, .mzya-catalog-panel .mzya-products-grid > *, .mzya-home-products-showcase .mzya-products-grid > *, .mzya-tab-products-showcase .mzya-products-grid > *, .seller-tab-panel .mzya-products-grid > * { max-width: 100% !important; min-width: 0 !important; width: 100% !important; } .mzya-products-grid .mzya-product-card, .mzya-home-products-grid .mzya-product-card, .seller-tab-panel .mzya-product-card { border-radius: 14px !important; min-width: 0 !important; } .mzya-product-card__media, .mzya-product-image-wrap { border-radius: 12px !important; margin: 8px !important; } .mzya-product-card__image, .mzya-product-card__media img, .mzya-product-image-wrap img { height: 190px !important; max-height: 190px !important; object-fit: contain !important; } .mzya-product-card__body { padding: 0 10px 12px !important; } .mzya-product-card__title-row { min-height: 38px !important; } .mzya-product-card__name { font-size: .82rem !important; line-height: 1.32 !important; } .mzya-product-card__price-final { font-size: 1.14rem !important; } .mzya-product-card__price-currency { font-size: .72rem !important; } .mzya-product-card__cta-wrap { gap: 6px !important; margin-top: 8px !important; } .mzya-product-card__action-button, .mzya-product-card__cta { min-height: 36px !important; padding-inline: 8px !important; font-size: .68rem !important; } .mzya-service-strip, .mzya-home-service-strip, .mzya-public-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .85rem !important; } .mzya-service-strip, .mzya-home-service-strip { padding: .9rem !important; } .mzya-service-item, .mzya-public-trust-card { align-items: flex-start !important; gap: .7rem !important; } .mzya-public-trust-card { padding: .9rem !important; } .mzya-public-trust-icon { flex: 0 0 38px !important; height: 38px !important; width: 38px !important; } #seller-panel-shipping .grid, #seller-panel-about .grid, #seller-panel-contact .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .9rem !important; } #seller-panel-reviews .grid { grid-template-columns: 1fr !important; } #seller-panel-shipping .rounded-2xl, #seller-panel-shipping .rounded-xl, #seller-panel-about .rounded-xl, #seller-panel-contact .rounded-xl, #seller-panel-reviews .rounded-xl { border-radius: 16px !important; } #seller-panel-shipping article, #seller-panel-shipping section, #seller-panel-about details, #seller-panel-about > div > div, #seller-panel-contact form, #seller-panel-contact .rounded-xl { padding: 1rem !important; } .mzya-policy-text, .mzya-public-description, #seller-panel-shipping p, #seller-panel-about p, #seller-panel-contact p { overflow-wrap: anywhere !important; word-break: normal !important; } .mzya-social-links { gap: .5rem !important; } .mzya-social-link { font-size: .8rem !important; padding: .5rem .72rem !important; } } /* MZYA SELLER STORE TABLET FIT - CONTENT END */ /* ========================================================= MZYA CATEGORY SUB-CATEGORIES COMPACT/EXPANDABLE GRID Scope: storefront category pages only. Keeps all links in HTML, but visually limits the first view. ========================================================= */ .mzya-category-subcats { --mzya-cat-blue: #2c5792; --mzya-cat-teal: #6d8387; --mzya-cat-bg: #edf1f2; --mzya-cat-border: rgba(109, 131, 135, 0.18); --mzya-cat-shadow: 0 14px 34px rgba(15, 23, 42, 0.045); margin-bottom: 1.35rem; } .mzya-category-subcats__intro { background: var(--mzya-cat-bg); border: 1px solid var(--mzya-cat-border); border-radius: 14px; color: var(--mzya-cat-teal); margin: 10px 0 12px; padding: 0.72rem 1rem; text-align: center; } .mzya-category-subcats__intro h2 { color: var(--mzya-cat-teal); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; } .mzya-category-subcats__description { color: var(--mzya-cat-teal); font-size: 0.84rem; font-style: italic; line-height: 1.55; margin: 0.3rem auto 0; max-width: 920px; text-transform: none; } .mzya-category-subcats__header { align-items: center; display: flex; gap: 0.85rem; justify-content: space-between; margin: 0.15rem 0 0.75rem; } .mzya-category-subcats__header h3 { color: var(--mzya-cat-blue); font-size: 0.94rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .mzya-category-subcats__toggle { align-items: center; background: #ffffff; border: 1px solid rgba(44, 87, 146, 0.14); border-radius: 999px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045); color: var(--mzya-cat-blue); display: inline-flex; flex: 0 0 auto; font-size: 0.84rem; font-weight: 800; gap: 0.32rem; line-height: 1; min-height: 36px; padding: 0.52rem 0.85rem; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .mzya-category-subcats__toggle:hover { border-color: rgba(44, 87, 146, 0.32); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07); transform: translateY(-1px); } .mzya-category-subcats__toggle-count { color: rgba(44, 87, 146, 0.64); font-weight: 700; } .mzya-category-subcats__toggle-icon { font-size: 0.72rem; transition: transform 0.18s ease; } .mzya-category-subcats[data-collapsed="false"] .mzya-category-subcats__toggle-icon { transform: rotate(180deg); } .mzya-category-children-grid { align-items: start !important; display: grid !important; gap: 1rem 1.15rem !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; justify-items: center !important; max-width: 100% !important; width: 100% !important; } .mzya-category-child-card { align-items: center; display: grid; gap: 0.46rem; justify-items: center; min-width: 0; width: 100%; } .mzya-category-child-card__image { align-items: center; background: var(--mzya-cat-bg); border: 1px solid rgba(109, 131, 135, 0.12); border-radius: 999px; box-shadow: var(--mzya-cat-shadow); color: var(--mzya-cat-teal); display: flex; height: 96px; justify-content: center; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; width: 96px; } .mzya-category-child-card__image:hover { border-color: rgba(44, 87, 146, 0.22); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .mzya-category-child-card__image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; } .mzya-category-child-card__placeholder { color: rgba(109, 131, 135, 0.45); font-size: 2rem; } .mzya-category-child-card__name { color: var(--mzya-cat-blue); display: block; font-size: 0.82rem; font-weight: 650; line-height: 1.25; max-width: 112px; text-align: center; } .mzya-category-child-card__name:hover { text-decoration: underline; text-underline-offset: 3px; } .mzya-category-subcats[data-collapsed="true"] .mzya-category-child-card:nth-child(n+9) { display: none !important; } @media (max-width: 1279px) { .mzya-category-children-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .mzya-category-subcats[data-collapsed="true"] .mzya-category-child-card:nth-child(n+7) { display: none !important; } } @media (max-width: 767px) { .mzya-category-subcats { margin-bottom: 1rem; } .mzya-category-subcats__intro { border-radius: 10px; margin: 6px 0 10px; padding: 0.66rem 0.78rem; } .mzya-category-subcats__intro h2 { font-size: 0.94rem; letter-spacing: 0.055em; } .mzya-category-subcats__description { font-size: 0.8rem; line-height: 1.45; } .mzya-category-subcats__header { margin-bottom: 0.55rem; } .mzya-category-subcats__header h3 { font-size: 0.82rem; } .mzya-category-subcats__toggle { font-size: 0.76rem; min-height: 32px; padding: 0.45rem 0.62rem; } .mzya-category-subcats[data-collapsed="true"] .mzya-category-children-grid { display: flex !important; gap: 0.85rem !important; justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; padding: 0.15rem 0.1rem 0.55rem; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .mzya-category-subcats[data-collapsed="false"] .mzya-category-children-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem 0.8rem !important; } .mzya-category-subcats[data-collapsed="true"] .mzya-category-child-card { flex: 0 0 72px; scroll-snap-align: start; } .mzya-category-subcats[data-collapsed="true"] .mzya-category-child-card:nth-child(n+6) { display: none !important; } .mzya-category-child-card__image { height: 64px; width: 64px; } .mzya-category-child-card__name { font-size: 0.75rem; max-width: 76px; } } @media (max-width: 379px) { .mzya-category-subcats__toggle-count { display: none; } } html[dir="rtl"] .mzya-category-subcats__toggle-icon, body[dir="rtl"] .mzya-category-subcats__toggle-icon { transform: scaleX(-1); } html[dir="rtl"] .mzya-category-subcats[data-collapsed="false"] .mzya-category-subcats__toggle-icon, body[dir="rtl"] .mzya-category-subcats[data-collapsed="false"] .mzya-category-subcats__toggle-icon { transform: scaleX(-1) rotate(180deg); } /* MZYA CATEGORY SUB-CATEGORIES COMPACT/EXPANDABLE GRID - END */