/* Vazirmatn font is loaded via in (faster than @import) */ /* ========================= RESET ========================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Vazirmatn, Tahoma, sans-serif; background: #F7F2E8; color: #111; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* ========================= HEADER ========================= */ .header { height: 90px; display: flex; align-items: center; padding: 0 8%; background: #fff; position: sticky; top: 0; z-index: 1000; direction: rtl; } .logo { order: 1; font-size: 32px; letter-spacing: 8px; font-weight: 600; white-space: nowrap; } nav { order: 2; display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; } nav a { margin: 0 12px; color: #222; font-size: 15px; transition: 0.3s ease; } nav a:hover { color: #806b4a; } .header-actions { order: 3; display: flex; align-items: center; gap: 20px; } .cart-icon { font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ========================= BUTTONS ========================= */ button { background: #1F3428; color: #fff; border: 0; padding: 16px 35px; cursor: pointer; font-family: inherit; border-radius: 8px; font-size: 15px; transition: 0.3s ease; } button:hover { transform: translateY(-2px); } button:disabled { opacity: 0.7; cursor: default; transform: none; } .outline { background: transparent; border: 1px solid #1F3428; color: #1F3428; } .outline:hover { background: #1F3428; color: #fff; } /* ========================= GENERAL ========================= */ section { padding: 90px 8%; text-align: center; } .page-heading { padding-bottom: 10px; } /* ========================= HERO ========================= */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 90px 8%; min-height: 720px; } .hero-text { width: 48%; } .hero-text > span { font-size: 14px; letter-spacing: 4px; color: #806b4a; } .hero h1 { font-size: 72px; line-height: 1.2; font-weight: 600; margin: 25px 0; } .hero p { font-size: 20px; line-height: 2; color: #555; max-width: 500px; } .hero-buttons { margin-top: 30px; display: flex; gap: 15px; flex-wrap: wrap; } .hero-trust { display: flex; gap: 25px; margin-top: 40px; font-size: 14px; flex-wrap: wrap; } .hero-visual { width: 42%; position: relative; } .main-image { width: 100%; height: 650px; background: #E9DECE; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 40px; } .main-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; } .main-image:hover img { transform: scale(1.05); } .floating-card { position: absolute; bottom: 40px; left: -30px; background: #fff; padding: 30px; width: 250px; border-radius: 25px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .floating-card span { font-size: 11px; letter-spacing: 3px; color: #806b4a; } .floating-card h3 { margin: 15px 0 10px; font-size: 22px; } .floating-card p { color: #777; font-size: 14px; line-height: 1.8; } .floating-card div { margin-top: 15px; font-size: 14px; color: #1F3428; } /* ========================= SECTION TITLE ========================= */ .section-title span { letter-spacing: 3px; font-size: 13px; color: #806b4a; } .section-title h2 { font-size: 42px; margin: 20px 0; } .section-title p { color: #666; line-height: 1.8; } /* ========================= ABOUT ========================= */ .about p { max-width: 700px; margin: auto; font-size: 18px; line-height: 2; } /* ========================= WHY ========================= */ .why { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .why div { background: #fff; padding: 35px; width: 230px; border-radius: 20px; } /* ========================= PRODUCTS ========================= */ .cards { display: flex; justify-content: center; gap: 30px; margin-top: 60px; flex-wrap: wrap; } .product { background: #fff; width: 330px; border-radius: 30px; overflow: hidden; transition: 0.3s ease; } .product:hover { transform: translateY(-10px); } .product-image, .product-img { height: 330px; background: #eee5d8; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .product-image img, .product-img img { width: 100%; height: 100%; object-fit: cover; } .badge { position: absolute; top: 18px; right: 18px; background: #1F3428; color: #fff; padding: 8px 13px; border-radius: 20px; font-size: 10px; letter-spacing: 1px; } .product-info { padding: 30px; text-align: right; } .product-info span { font-size: 12px; letter-spacing: 2px; color: #806b4a; } .product-info h3 { font-size: 24px; margin: 15px 0; } .product-info p { color: #666; line-height: 1.8; } .rating, .stars { color: #806b4a; letter-spacing: 4px; margin: 20px 0; } .products-button { margin-top: 50px; } /* ========================= HAIR QUIZ ========================= */ .finder { background: #1F3428; color: #fff; padding: 100px 8%; } .finder-content span { letter-spacing: 4px; font-size: 13px; color: #d7bf91; } .finder h2 { font-size: 45px; } .finder-content > p { color: #e5e5e5; line-height: 1.9; } .hair-options, .choices { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin: 50px 0; } .hair-option { background: #fff; color: #111; width: 260px; padding: 35px 25px; border-radius: 25px; transition: 0.3s ease; } .hair-option:hover { transform: translateY(-8px); } .hair-option p { color: #666; line-height: 1.8; } .icon { font-size: 35px; margin-bottom: 15px; } .finder button { background: #d7bf91; color: #111; } .finder button:hover { background: #e4d0a7; } /* ========================= PROOF ========================= */ .proof { background: #faf8f2; } .proof-grid { display: flex; justify-content: center; gap: 30px; margin-top: 60px; flex-wrap: wrap; } .proof-card { background: #fff; width: 330px; padding: 40px 30px; border-radius: 30px; text-align: right; } .proof-card p { color: #666; line-height: 1.8; } .before-after { height: 180px; background: #eee5d8; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .number { font-size: 50px; color: #c9a86a; } /* ========================= PRODUCT PAGE ========================= */ .product-main { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 100px 8%; } .product-gallery { width: 45%; } .main-product-image { height: 550px; background: #eee5d8; border-radius: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .main-product-image img { width: 100%; height: 100%; object-fit: cover; } .thumbs { display: flex; gap: 15px; margin-top: 20px; } .thumbs div { width: 80px; height: 80px; background: #e5dac8; border-radius: 15px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .thumbs img { width: 100%; height: 100%; object-fit: cover; } .product-detail { width: 45%; text-align: right; } .product-detail h1 { font-size: 45px; line-height: 1.5; } .product-detail > p { color: #555; line-height: 2; } .price { font-size: 30px; font-weight: 700; } .quantity { display: flex; gap: 20px; align-items: center; margin: 20px 0; } .delivery { margin-top: 25px; line-height: 2; color: #555; } .info-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .info-grid div { background: #fff; padding: 30px; border-radius: 20px; } /* ========================= PRODUCT FILTER ========================= */ .product-filter { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; margin: 50px 0 70px; } .product-filter button { background: #fff; color: #1F3428; border: 1px solid #ddd; border-radius: 40px; padding: 14px 30px; font-size: 15px; font-weight: 600; transition: 0.3s; cursor: pointer; } .product-filter button:hover { background: #1F3428; color: #fff; transform: translateY(-3px); } .product-filter .active { background: #1F3428; color: #fff; border-color: #1F3428; } /* ========================= CONSULTATION ========================= */ .consultation-hero .hair-options { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin-top: 60px; } /* ========================= HAIR PROBLEMS ========================= */ .hair-problems { margin-top: 80px; } .hair-problems h2 { margin-bottom: 40px; } .problem-list { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .problem-list div { background: #fff; color: #111; padding: 18px 35px; border-radius: 40px; transition: 0.3s ease; cursor: pointer; } .problem-list div:hover { background: #d7bf91; transform: translateY(-5px); } /* ========================= CONSULTATION RESULT ========================= */ .recommendation { background: #1F3428; color: #fff; padding: 50px 40px; border-radius: 30px; max-width: 700px; margin: 80px auto 0; } .recommendation span { color: #d7bf91; letter-spacing: 3px; font-size: 13px; } .recommendation h2 { font-size: 35px; margin: 20px 0; } .recommendation p { line-height: 2; } .recommendation button { background: #d7bf91; color: #111; margin-top: 25px; } /* ========================= BLOG ========================= */ .blog-cards { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 60px; } .blog-card { background: #fff; width: 330px; border-radius: 30px; overflow: hidden; text-align: right; } .blog-image { height: 220px; background: #eee5d8; display: flex; align-items: center; justify-content: center; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; } .blog-card h3 { padding: 20px 25px 10px; font-size: 22px; } .blog-card p { padding: 0 25px 25px; color: #666; line-height: 1.8; } /* ========================= ABOUT PAGE ========================= */ .about-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 60px; } .about-grid div { background: #fff; width: 300px; padding: 35px; border-radius: 30px; text-align: right; } .about-grid h3 { font-size: 24px; margin-bottom: 20px; } .about-grid p { color: #666; line-height: 2; } /* ========================= FOOTER ========================= */ .footer { background: #111; color: #fff; padding: 80px 8% 30px; } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .footer-brand { max-width: 300px; } .footer-logo { font-size: 28px; letter-spacing: 7px; margin-bottom: 20px; } .footer-links, .footer-social { display: flex; flex-direction: column; gap: 15px; } .footer h3, .footer h4 { margin-bottom: 20px; color: #fff; } .footer a { color: #ccc; transition: 0.3s; } .footer a:hover { color: #d7bf91; } .footer p { color: #aaa; line-height: 2; } .footer-bottom { border-top: 1px solid #333; margin-top: 50px; padding-top: 25px; text-align: center; color: #aaa; } /* ========================= MOBILE MENU BUTTON (base) ========================= */ .mobile-menu { display: none; } /* ========================= TABLET ========================= */ @media (max-width: 1200px) { .hero { gap: 35px; } .hero h1 { font-size: 58px; } .main-image { height: 520px; } .floating-card { left: -10px; } .product-main { gap: 40px; } } /* ========================= MOBILE (900px) ========================= */ @media (max-width: 900px) { .header { padding: 0 5%; } .logo { position: absolute; left: 50%; transform: translateX(-50%); font-size: 26px; letter-spacing: 5px; z-index: 1001; } /* منوی دسکتاپ مخفی می‌شود، منوی موبایل با کلاس active جایگزین می‌شود */ nav { display: none; } /* دکمه همبرگر */ .mobile-menu { display: flex; align-items: center; justify-content: center; position: absolute; right: 5%; width: 42px; height: 42px; background: transparent; color: #1F3428; border: none; padding: 0; font-size: 27px; line-height: 1; cursor: pointer; z-index: 1001; } .mobile-menu:hover { transform: none; background: transparent; } /* سبد خرید و کاربر سمت چپ */ .header-actions { position: absolute; left: 5%; margin: 0; z-index: 1001; } .cart-icon { font-size: 22px; } /* پس‌زمینه مات پشت منوی بازشده (کل صفحه، به‌جز هدر) */ body.menu-open::before { content: ""; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 900; } /* منوی موبایل باز شده - کارت شناور کرمی */ nav.active { display: flex; position: fixed; top: 90px; right: 15px; width: 280px; height: auto; max-height: calc(100vh - 110px); background: #F7F2E8; border-radius: 20px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 30px 20px calc(30px + 0.5cm); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); z-index: 999; } nav.active a { display: block; width: 100%; margin: 0; padding: 14px 18px; font-size: 16px; color: #222; border-radius: 12px; transition: 0.25s ease; } nav.active a:hover { background: #fff; color: #1F3428; } nav.active a:active { background: #1F3428; color: #fff; } /* هیرو */ .hero { flex-direction: column; padding: 60px 5%; min-height: auto; text-align: center; } .hero-text { width: 100%; } .hero h1 { font-size: 48px; } .hero p { font-size: 17px; margin: auto; } .hero-buttons { justify-content: center; } .hero-trust { justify-content: center; } .hero-visual { width: 100%; } .main-image { height: 500px; } .floating-card { right: 15px; bottom: 20px; } .section-title h2 { font-size: 34px; } .finder h2 { font-size: 35px; } .product-main { flex-direction: column; padding: 70px 5%; } .product-gallery, .product-detail { width: 100%; } .product-detail { text-align: right; } .main-product-image { height: 500px; } } /* ========================= DESKTOP ========================= */ @media (min-width: 901px) { .mobile-menu { display: none !important; } nav { display: flex; position: static; transform: none; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 600px) { section { padding: 65px 5%; } .header { height: 75px; } .logo { font-size: 23px; } .hero { padding-top: 50px; } .hero h1 { font-size: 40px; } .hero p { font-size: 16px; } .hero-trust { flex-direction: column; gap: 10px; } .main-image { height: 400px; border-radius: 30px; } .floating-card { position: relative; right: auto; bottom: auto; width: 90%; margin: -50px auto 0; } .hair-option { width: 100%; max-width: 330px; } .product { width: 100%; max-width: 360px; } .product-image { height: 320px; } .product-detail h1 { font-size: 34px; } .main-product-image { height: 400px; } .proof-card { width: 100%; max-width: 360px; } .blog-card { width: 100%; max-width: 360px; } .about-grid div { width: 100%; max-width: 360px; } .footer { padding: 60px 5% 25px; } .footer-grid { flex-direction: column; align-items: center; text-align: center; } .footer-brand { max-width: 100%; } .footer-links, .footer-social { align-items: center; } .auth-box { padding: 30px 25px; } } /* ========================= CART PAGE ========================= */ .cart-page { text-align: right; max-width: 900px; margin: 0 auto; } .cart-page h1 { text-align: center; margin-bottom: 60px; } .cart-list { display: flex; flex-direction: column; gap: 20px; } .cart-item { display: flex; align-items: center; gap: 20px; background: #fff; padding: 20px; border-radius: 20px; } .cart-item-image { width: 90px; height: 90px; border-radius: 15px; overflow: hidden; flex-shrink: 0; background: #eee5d8; } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; } .cart-item-info h3 { font-size: 18px; margin: 0 0 8px; } .cart-item-price { color: #806b4a; font-weight: 600; } .cart-item-quantity { display: flex; align-items: center; gap: 12px; } .cart-item-quantity button { padding: 8px 16px; font-size: 14px; } .cart-item-remove { background: transparent; color: #999; padding: 5px 10px; } .cart-item-remove:hover { color: #c0392b; transform: none; } .cart-summary { background: #fff; border-radius: 20px; padding: 35px; margin-top: 40px; } .cart-summary-row { display: flex; justify-content: space-between; padding: 12px 0; color: #555; } .cart-summary-total { border-top: 1px solid #eee; margin-top: 10px; padding-top: 20px; font-weight: 700; font-size: 20px; color: #111; } .cart-checkout-btn { width: 100%; margin-top: 20px; } @media (max-width: 600px) { .cart-item { flex-wrap: wrap; } .cart-item-quantity { margin-right: auto; } } /* ========================= CHECKOUT PAGE ========================= */ .checkout-page { text-align: right; max-width: 1000px; margin: 0 auto; } .checkout-page h1 { text-align: center; margin-bottom: 60px; } .checkout-layout { display: flex; gap: 30px; align-items: flex-start; } .checkout-form { flex: 1.4; background: #fff; padding: 35px; border-radius: 20px; } .checkout-form h3 { margin: 0 0 20px; font-size: 18px; } .checkout-form h3:not(:first-child) { margin-top: 35px; } .form-row { display: flex; gap: 20px; } .form-group { flex: 1; margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #555; } .form-group input, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 10px; font-family: inherit; font-size: 14px; resize: none; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #1F3428; box-shadow: 0 0 0 3px rgba(31, 52, 40, 0.15); } /* ========================= FOCUS VISIBILITY ========================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #1F3428; outline-offset: 2px; } .payment-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; } .payment-option { display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 10px; padding: 15px; cursor: pointer; } .checkout-submit-btn { width: 100%; } .checkout-summary { flex: 1; background: #fff; padding: 35px; border-radius: 20px; } .checkout-summary h3 { margin: 0 0 20px; font-size: 18px; } .checkout-summary-item { display: flex; justify-content: space-between; padding: 10px 0; color: #555; font-size: 14px; border-bottom: 1px solid #f0f0f0; } .checkout-summary-row { display: flex; justify-content: space-between; padding: 12px 0; color: #555; } .checkout-summary-total { border-top: 1px solid #eee; margin-top: 10px; padding-top: 20px; font-weight: 700; font-size: 20px; color: #111; } @media (max-width: 900px) { .checkout-layout { flex-direction: column; } } @media (max-width: 600px) { .form-row { flex-direction: column; gap: 0; } .checkout-form, .checkout-summary { padding: 25px; } } /* ========================= AUTH PAGE (LOGIN / SIGNUP) ========================= */ .auth-page { display: flex; justify-content: center; align-items: center; min-height: 65vh; } .auth-box { background: #fff; max-width: 420px; width: 100%; padding: 45px; border-radius: 30px; } .auth-tabs { display: flex; gap: 10px; margin-bottom: 35px; background: #f7f2e8; padding: 6px; border-radius: 12px; } .auth-tab { flex: 1; background: transparent; color: #555; padding: 12px; border-radius: 8px; font-size: 14px; } .auth-tab:hover { transform: none; } .auth-tab.active { background: #1F3428; color: #fff; } .auth-form { text-align: right; } .auth-forgot { display: block; text-align: left; font-size: 13px; color: #806b4a; margin-bottom: 25px; } .auth-submit-btn { width: 100%; } /* ========================= USER ICON ========================= */ .user-icon { display: flex; align-items: center; justify-content: center; cursor: pointer; color: #222; position: relative; transition: 0.3s ease; } .user-icon:hover { color: #806b4a; } .user-icon.logged-in::after { content: ""; position: absolute; top: -2px; left: -2px; width: 9px; height: 9px; background: #4caf50; border: 2px solid #fff; border-radius: 50%; } /* ========================= SKIP LINK ========================= */ .skip-link { position: absolute; top: -60px; right: 10px; background: #1F3428; color: #fff; padding: 12px 22px; border-radius: 8px; z-index: 2000; transition: top 0.2s ease; } .skip-link:focus { top: 10px; } /* ========================= SCREEN-READER ONLY ========================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================= ACCORDION (POLICIES PAGE) ========================= */ .accordion-section { max-width: 750px; margin: 0 auto; } .accordion { display: flex; flex-direction: column; gap: 15px; } .accordion-item { background: #fff; border-radius: 15px; padding: 22px 30px; text-align: right; } .accordion-item summary { cursor: pointer; font-weight: 600; font-size: 17px; color: #1F3428; list-style: none; display: flex; justify-content: space-between; align-items: center; } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary::after { content: "+"; font-size: 22px; color: #806b4a; transition: transform 0.3s ease; } .accordion-item[open] summary::after { transform: rotate(45deg); } .accordion-content { margin-top: 18px; } .accordion-content p { color: #555; line-height: 2; margin-bottom: 18px; } .accordion-content .contact-item { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .accordion-content .contact-item strong { color: #1F3428; } .purchase-box { margin-top: 20px; } .purchase-box form.cart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 20px 0; } .purchase-box .quantity { margin: 0; } .purchase-box .qty { width: 70px; padding: 12px; border: 1px solid #ddd; border-radius: 10px; text-align: center; font-family: inherit; font-size: 15px; } .purchase-box .single_add_to_cart_button { background: #1F3428; color: #fff; border: none; border-radius: 40px; padding: 16px 36px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.3s; } .purchase-box .single_add_to_cart_button:hover { background: #345c48; } .product-detail > span { display: inline-block; background: #F7F2E8; color: #806b4a; padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .product-full-description { color: #555; line-height: 2; max-width: 700px; margin: 20px auto 0; text-align: center; } /* ========================= PRODUCT SEARCH (by brand / name) ========================= */ .product-search { max-width: 460px; margin: 40px auto 0; } .product-search input { width: 100%; padding: 15px 24px; border: 1px solid #ddd; border-radius: 40px; background: #fff; font-family: inherit; font-size: 15px; color: #111; } .product-search input:focus { outline: none; border-color: #1F3428; box-shadow: 0 0 0 3px rgba(31, 52, 40, 0.15); } .product-search + .product-filter { margin-top: 30px; } .no-results { text-align: center; color: #666; margin: 20px 0 0; } /* ========================= HEADER SEARCH (magnifier + pill) ========================= */ .search-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; color: #222; border: 0; border-radius: 50%; cursor: pointer; transition: color 0.3s ease; } .search-toggle:hover { background: transparent; color: #806b4a; transform: none; } .header-search { position: absolute; top: 50%; left: 50%; width: clamp(260px, calc(84% - 500px), 560px); height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: #F7F2E8; border: 1px solid #e3dac7; border-radius: 40px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); z-index: 1003; transform: translate(-50%, -50%) scaleX(0.55); transform-origin: right center; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s; } .header-search.open { transform: translate(-50%, -50%) scaleX(1); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .header-search:focus-within { border-color: #1F3428; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(31, 52, 40, 0.15); } .header.search-open nav { opacity: 0; pointer-events: none; } .header-search .hs-icon { flex: none; color: #806b4a; } .header-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; color: #111; -webkit-appearance: none; appearance: none; } .header-search input:focus, .header-search input:focus-visible { outline: none; } .header-search input::-webkit-search-cancel-button { display: none; } .header-search .hs-close { flex: none; width: 30px; height: 30px; padding: 0; background: transparent; color: #666; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; } .header-search .hs-close:hover { background: rgba(0, 0, 0, 0.06); transform: none; } .hs-results { position: absolute; top: calc(100% + 10px); right: 0; left: 0; background: #fff; border: 1px solid #e3dac7; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); padding: 8px; max-height: 60vh; overflow-y: auto; } .hs-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; color: #111; font-size: 14px; text-align: right; } .hs-item:hover, .hs-item:focus-visible { background: #F7F2E8; } .hs-item img { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: #eee5d8; } .hs-all { display: block; padding: 10px; text-align: center; font-size: 13px; font-weight: 600; color: #806b4a; } .hs-empty { margin: 0; padding: 14px; text-align: center; color: #666; font-size: 14px; } @media (max-width: 900px) { .header-search { left: 5%; right: 5%; width: auto; height: 48px; transform: translateY(-50%) scaleX(0.6); transform-origin: left center; } .header-search.open { transform: translateY(-50%) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .header-search { transition: none; } } /* ========================= SEARCH SUGGESTIONS (brand list, roll-down) ========================= */ .product-search { position: relative; } .ps-results { z-index: 30; } .hs-results { transform-origin: top center; animation: hsDrop 0.2s ease-out; } @keyframes hsDrop { from { opacity: 0; transform: translateY(-10px) scaleY(0.9); } to { opacity: 1; transform: none; } } .hs-label { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: #806b4a; text-align: right; } .hs-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; color: #111; border: 0; border-radius: 14px; font-family: inherit; font-size: 14px; text-align: right; cursor: pointer; } .hs-brand:hover, .hs-brand:focus-visible { background: #F7F2E8; transform: none; } .hs-b-count { flex: none; font-size: 12px; color: #888; } .hs-results mark { background: rgba(201, 168, 106, 0.38); color: inherit; font-weight: 700; border-radius: 4px; padding: 0 1px; } @media (prefers-reduced-motion: reduce) { .hs-results { animation: none; } } /* hero: عکس جدیدترین محصول (لینک به صفحه‌ی محصول) */ .hero-image-link { display: block; width: 100%; height: 100%; } /* hero: برچسب «New Product» روی عکس جدیدترین محصول */ .main-image { position: relative; } .hero-badge { position: absolute; top: 24px; right: 24px; z-index: 2; padding: 9px 18px; background: #1F3428; color: #fff; border-radius: 30px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; direction: ltr; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); pointer-events: none; } @media (max-width: 600px) { .hero-badge { top: 16px; right: 16px; padding: 7px 14px; font-size: 12px; } } /* سبد خرید: حالت خالی، پیشنهادها، نشانگر تعداد */ .cart-empty { text-align: center; padding: 50px 20px; background: #fff; border-radius: 24px; } .cart-empty[hidden], .cart-summary[hidden], .cart-suggest[hidden], .checkout-empty[hidden] { display: none; } .cart-empty p { margin-bottom: 20px; color: #666; } .checkout-empty { color: #666; margin: 10px 0 20px; } .cart-suggest { margin-top: 50px; } .cart-suggest h2 { font-size: 24px; margin-bottom: 6px; } .cart-suggest-note { color: #666; margin-bottom: 22px; } .suggest-price { font-weight: 700; margin: 8px 0 12px; } .suggest-add { width: 100%; } .cart-icon { position: relative; } .cart-count { position: absolute; top: -8px; left: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #1F3428; color: #fff; font-size: 11px; line-height: 18px; text-align: center; } /* ناموجود، پیگیری سفارش، خطای فرم */ .badge.sold-out { background: #8a3b3b; color: #fff; } .primary-btn:disabled { opacity: 0.55; cursor: not-allowed; } .cart-item-note { color: #8a5a00; font-size: 13px; margin-top: 4px; } .form-error { background: #fcebec; color: #b4262a; border: 1px solid #f0c7c9; border-radius: 14px; padding: 12px 16px; margin: 16px 0; font-weight: 600; } .form-error[hidden], .track-notice[hidden], .track-result[hidden] { display: none; } .track-form { background: #fff; border-radius: 24px; padding: 28px; margin-bottom: 30px; } .track-notice { background: #e4f8f0; color: #0a6a4c; border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; font-weight: 600; } .track-notice.is-error { background: #fcebec; color: #b4262a; } .track-result { background: #fff; border-radius: 24px; padding: 28px; } .track-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .track-label { color: #777; font-size: 14px; } .track-status { background: #e4f1ea; color: #1e5a3e; padding: 6px 16px; border-radius: 30px; font-weight: 700; font-size: 14px; } .track-status.track-cancelled { background: #fcebec; color: #b4262a; } .track-timeline { list-style: none; padding: 0; margin: 0 0 24px; border-right: 2px solid #e6dfd0; } .track-timeline li { padding: 8px 18px 8px 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .track-timeline time { color: #888; } .track-items { margin-bottom: 12px; } .track-meta { color: #666; font-size: 14px; margin: 16px 0; }