/* ========================================================= کمرا مرکزی — استایل اصلی (نسخه ۲) پالت بر اساس رنگ لوگو (#B22C20) ========================================================= */ /* ---------- فونت وزیرمتن (ارقام فارسی) ---------- */ @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-FD-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-FD-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-FD-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-FD-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; } /* ---------- متغیرها ---------- */ :root { --red: #B22C20; --red-dark: #8C2118; --red-tint: #FBECEA; --amber: #F2A516; --amber-tint: #FFF4DE; --amber-ink: #4A2F00; --green: #1E9E5A; --green-tint: #E6F5EC; --ink: #1E2124; --ink-2: #4B5057; --muted: #7A8088; --line: #E6E8EB; --bg: #F4F5F7; --white: #fff; --font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; --r-card: 14px; --r-ctl: 10px; --r-pill: 999px; --container: 1240px; --gutter: 20px; --header-h: 72px; --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- پایه ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; } html, body { overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.8; color: var(--ink); background: var(--bg); direction: rtl; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--red-dark); } h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .5em; color: var(--ink); font-weight: 800; } p { margin: 0 0 1em; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; } .cm-icon { flex-shrink: 0; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -60px; right: 16px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-ctl); } .skip-link:focus { top: 12px; color: #fff; } /* ---------- دکمه‌ها ---------- */ .btn, a.button, button.button, input.button, .comment-form .submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; background: var(--red); border: 1.5px solid var(--red); border-radius: var(--r-ctl); transition: background-color .2s, border-color .2s, color .2s, transform .1s; text-decoration: none; } .btn:hover, a.button:hover, button.button:hover, .comment-form .submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; } .btn:active, .woocommerce .button:active { transform: translateY(1px); } .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce button.button.disabled { background: var(--line); border-color: var(--line); color: var(--muted); padding: 10px 22px; opacity: 1; } .btn-outline { background: transparent; color: var(--red); } .btn-outline:hover { background: var(--red-tint); color: var(--red-dark); border-color: var(--red); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-2); } .btn-sm { min-height: 38px; padding: 6px 14px; font-size: 14px; } .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: var(--r-ctl); color: var(--ink); position: relative; } .icon-btn:hover { background: var(--bg); color: var(--ink); } /* ---------- نوار اطلاعیه ---------- */ .notice-bar { background: var(--ink); color: #fff; font-size: 13px; } .notice-bar p { margin: 0; padding: 7px 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .notice-bar .cm-icon { color: var(--amber); } /* ---------- هدر ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 var(--line); } .admin-bar .site-header { top: 32px; } .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(30, 33, 36, .07); } .header-main { display: flex; align-items: center; gap: 24px; height: var(--header-h); position: relative; z-index: 2; background: #fff; } .site-branding { flex-shrink: 0; } .site-branding .custom-logo { height: 46px; width: auto; } .site-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .site-logo:hover { color: var(--ink); } .logo-mark { width: 58px; height: auto; flex-shrink: 0; display: block; } .logo-text { display: flex; flex-direction: column; line-height: 1.15; } .logo-name { font-size: 21px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } .logo-latin { font-size: 11.5px; font-weight: 700; color: var(--red); direction: ltr; text-align: right; letter-spacing: .06em; margin-top: 3px; } .logo-white .logo-name { color: #fff; } .logo-white .logo-latin { color: #E8A39B; } .menu-toggle { display: none; } .header-search { position: relative; flex: 1; max-width: 560px; } .header-search .search-input { width: 100%; height: 46px; padding: 0 46px 0 16px; background: var(--bg); border: 1.5px solid transparent; border-radius: var(--r-ctl); font-size: 14px; transition: border-color .2s, background-color .2s; -webkit-appearance: none; appearance: none; } .header-search .search-input::placeholder { color: var(--muted); } .header-search .search-input:focus { outline: none; background: #fff; border-color: var(--red); } .header-search .search-icon { position: absolute; top: 0; right: 14px; height: 46px; display: flex; align-items: center; color: var(--muted); pointer-events: none; } .header-search.is-loading .search-icon { animation: cm-pulse 1s infinite; } @keyframes cm-pulse { 50% { opacity: .35; } } .search-results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 40px rgba(30, 33, 36, .12); padding: 8px; max-height: 70vh; overflow: auto; } .sr-group { margin: 6px 10px 4px; font-size: 12px; font-weight: 700; color: var(--muted); } .sr-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--ink); } .sr-item:hover, .sr-item.is-active { background: var(--bg); color: var(--ink); } .sr-item img, .sr-noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: var(--bg); flex-shrink: 0; } .sr-text { display: flex; flex-direction: column; min-width: 0; } .sr-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-price { font-size: 13px; color: var(--ink-2); } .sr-cat { font-weight: 700; } .sr-all { display: block; margin-top: 6px; padding: 10px; text-align: center; font-size: 14px; font-weight: 700; border-top: 1px solid var(--line); } .sr-empty { margin: 0; padding: 14px; color: var(--ink-2); font-size: 14px; } .header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .header-phone, .header-account { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; color: var(--ink); border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; white-space: nowrap; } .header-phone:hover, .header-account:hover { background: var(--bg); color: var(--ink); } .header-phone span { direction: ltr; unicode-bidi: isolate; } .header-account { border: 1px solid var(--line); } .account-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .header-cart { width: 48px; height: 48px; } .cart-count { position: absolute; top: 2px; left: 0; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: var(--r-pill); } .cart-count.is-empty { display: none; } /* ---------- منوی اصلی / مگامنو ---------- */ @media (min-width: 992px) { /* منو خارج از جریان صفحه؛ فضایش با margin ثابت هدر رزرو می‌شود تا هنگام پنهان شدن، صفحه جابه‌جا نشود. */ .site-header { margin-bottom: 49px; } .main-nav { position: absolute; top: 100%; right: 0; left: 0; z-index: 1; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); transition: transform .25s var(--ease), opacity .2s, visibility 0s; } .site-header.is-compact .main-nav { transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .25s var(--ease), opacity .2s, visibility 0s .25s; } .site-header.is-compact .main-nav:focus-within { transform: none; opacity: 1; visibility: visible; } .site-header.is-scrolled .main-nav { box-shadow: 0 8px 20px rgba(30, 33, 36, .06); } } .drawer-head, .drawer-foot { display: none; } .nav-inner { display: flex; align-items: center; gap: 4px; position: relative; } .nav-all { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 14px; margin-inline-end: 6px; border-inline-end: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink); } .nav-all .cm-icon { color: var(--red); } .primary-menu, .primary-menu ul { list-style: none; margin: 0; padding: 0; } .primary-menu { display: flex; flex-wrap: wrap; align-items: center; } .primary-menu > li > a { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); position: relative; } .primary-menu > li > a::after { content: ""; position: absolute; bottom: 0; right: 12px; left: 12px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .2s var(--ease); } .primary-menu > li:hover > a, .primary-menu > li:focus-within > a, .primary-menu > li.current-menu-item > a, .primary-menu > li.current-menu-ancestor > a { color: var(--red); } .primary-menu > li:hover > a::after, .primary-menu > li:focus-within > a::after, .primary-menu > li.current-menu-item > a::after { transform: scaleX(1); } @media (min-width: 992px) { .primary-menu > li > .sub-menu { position: absolute; top: 100%; right: 0; left: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px; padding: 24px 28px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 24px 40px rgba(30, 33, 36, .1); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s; } .primary-menu > li:hover > .sub-menu, .primary-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; } .primary-menu .sub-menu > li > a { display: block; padding: 6px 0; font-size: 14px; font-weight: 700; color: var(--ink); } .primary-menu .sub-menu > li.menu-item-has-children > a { border-inline-start: 3px solid var(--red); padding-inline-start: 8px; margin-bottom: 4px; } .primary-menu .sub-menu .sub-menu a { font-weight: 400; color: var(--ink-2); padding: 4px 0; font-size: 13.5px; } /* سطح چهارم: زیر آیتم سطح سوم با تورفتگی */ .primary-menu .sub-menu .sub-menu .sub-menu { margin: 0 0 4px; padding-inline-start: 12px; border-inline-start: 1px dashed var(--line); } .primary-menu .sub-menu .sub-menu .sub-menu a { font-size: 12.5px; color: var(--muted); padding: 2px 0; } .primary-menu .sub-menu .sub-menu .sub-menu a::before { content: "— "; color: #C5C9CE; } .primary-menu .sub-menu .sub-menu .menu-item-has-children > a { color: var(--ink); font-weight: 500; } .primary-menu > li > .sub-menu { max-height: 70vh; overflow-y: auto; } .primary-menu .sub-menu a:hover { color: var(--red); } .submenu-toggle { display: none; } } /* ---------- لایه‌ی تیره ---------- */ .overlay { position: fixed; inset: 0; z-index: 150; background: rgba(30, 33, 36, .5); animation: cm-fade .2s; } @keyframes cm-fade { from { opacity: 0; } } /* ---------- کشوی سبد خرید ---------- */ .cart-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 200; width: min(400px, 92vw); display: flex; flex-direction: column; background: #fff; transform: translateX(-102%); transition: transform .3s var(--ease); visibility: hidden; } .is-cart-open .cart-drawer { transform: none; visibility: visible; } .cart-drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .drawer-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; } .mini-cart-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; } .woocommerce-mini-cart { list-style: none; margin: 0; padding: 4px 18px; flex: 1; overflow: auto; } .woocommerce-mini-cart-item { position: relative; display: block; padding: 14px 0 14px 28px !important; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.6; min-height: 92px; } .woocommerce-mini-cart-item:last-child { border-bottom: 0; } .woocommerce-mini-cart-item a:not(.remove) { color: var(--ink); display: block; } .woocommerce-mini-cart-item img { float: right; width: 64px !important; height: 64px; object-fit: contain; margin: 0 0 0 12px !important; border-radius: 10px; background: var(--bg); } .woocommerce-mini-cart-item .quantity { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; } .woocommerce-mini-cart-item a.remove { position: absolute !important; top: 14px; left: 0; right: auto !important; width: 26px; height: 26px; line-height: 24px; font-size: 18px; text-align: center; color: var(--muted) !important; border-radius: 50%; } .woocommerce-mini-cart-item a.remove:hover { background: var(--red-tint); color: var(--red) !important; } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 16px 18px 12px; font-size: 15px; border-top: 1px solid var(--line); background: #fff; } .woocommerce-mini-cart__total strong { font-weight: 500; color: var(--ink-2); } .woocommerce-mini-cart__total .amount { font-size: 19px; font-weight: 800; color: var(--ink); } .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; padding: 0 18px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); } .woocommerce-mini-cart__buttons .button { width: 100%; margin: 0 !important; } .cm-btn-checkout { min-height: 54px !important; font-size: 16px !important; justify-content: center !important; padding-inline: 18px !important; } .cm-btn-checkout .cm-icon:last-child { display: none; } .cart-drawer .woocommerce-mini-cart__buttons a.cm-btn-cart { background: #fff; color: var(--ink); border-color: var(--line); font-weight: 500; } .cart-drawer .woocommerce-mini-cart__buttons a.cm-btn-cart:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-2); } /* کشوی سبد در صفحه‌های ووکامرس (بدنه کلاس woocommerce دارد و استایل ابزارک ووکامرس تداخل می‌کند) */ .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item { position: relative; display: block; margin: 0; padding: 14px 0 14px 28px !important; list-style: none; font-weight: 500; } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::before, .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::after { content: none; } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:not(.remove) { display: block; font-weight: 500; color: var(--ink); } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img { float: right !important; width: 64px !important; height: 64px !important; margin: 0 0 0 12px !important; object-fit: contain; border-radius: 10px; background: var(--bg); box-shadow: none; } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove { position: absolute !important; top: 14px !important; left: 0 !important; right: auto !important; } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity { display: block; clear: none; } .cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::after { content: ""; display: table; clear: both; } .cart-drawer dl.variation { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); } .cart-drawer dl.variation dt, .cart-drawer dl.variation dd { display: inline; float: none; margin: 0; padding: 0; border: 0; } .cart-drawer dl.variation dd p { display: inline; margin: 0; } /* نوار مدیریت وردپرس روی کشوها نیفتد */ .admin-bar .cart-drawer { top: 32px; } @media (max-width: 782px) { .admin-bar .cart-drawer { top: 46px; } } .woocommerce-mini-cart__empty-message { margin: auto; padding: 40px 18px; text-align: center; color: var(--ink-2); } /* ---------- بخش‌های عمومی ---------- */ .site-main { padding: 24px 0 64px; min-height: 50vh; } .page-head { margin: 8px 0 20px; } .page-title { font-size: 26px; margin: 0; } .page-desc, .term-description { color: var(--ink-2); max-width: 75ch; margin-top: 6px; } .breadcrumb, .woocommerce-breadcrumb { margin: 0 0 12px; font-size: 13px; color: var(--muted); } .breadcrumb a, .woocommerce .woocommerce-breadcrumb a { color: var(--ink-2); } .bc-sep { margin: 0 8px; color: var(--line); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .section-head h2 { font-size: 20px; margin: 0; } .section-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; } .home-section { margin-top: 36px; } /* ---------- اسلایدر ---------- */ .home { padding-top: 16px; } .slider { position: relative; overflow: hidden; border-radius: 16px; background: var(--ink); aspect-ratio: 32 / 10; } .slides, .slide, .slide a, .slide picture { position: absolute; inset: 0; } .slide { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; } .slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; } .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); opacity: 0; transition: opacity .2s; } .slider:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; } .slider-arrow.prev { right: 16px; } .slider-arrow.next { left: 16px; } .slider-dots { position: absolute; bottom: 14px; right: 0; left: 0; z-index: 2; display: flex; justify-content: center; gap: 6px; } .dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); transition: width .25s var(--ease), background-color .25s; } .dot.is-active { width: 26px; background: #fff; } /* ---------- ردیف دسته‌بندی‌ها ---------- */ .cat-rail-wrap { margin-top: 32px; } .cat-rail { list-style: none; margin: 0; padding: 18px 12px; display: flex; gap: 8px; justify-content: space-around; background: #fff; border-radius: var(--r-card); overflow-x: auto; scrollbar-width: none; } .cat-rail::-webkit-scrollbar { display: none; } .cat-rail li { flex: 0 0 auto; } .cat-rail a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; color: var(--ink); text-align: center; } .cat-img { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--red); overflow: hidden; transition: box-shadow .2s; } .cat-img img { width: 100%; height: 100%; object-fit: cover; } .cat-rail a:hover .cat-img { box-shadow: 0 0 0 2px var(--red); } .cat-name { font-size: 13px; font-weight: 700; line-height: 1.5; } .cat-rail a:hover { color: var(--red); } /* ---------- نوار فیلم (امضای بصری سایت) ---------- */ .film-band { --hole: rgba(255, 255, 255, .9); position: relative; margin-top: 28px; padding: 40px 20px 40px; border-radius: 16px; background: var(--red); } .film-band::before, .film-band::after, .film-edge { content: ""; position: absolute; right: 20px; left: 20px; height: 9px; background: repeating-linear-gradient(90deg, var(--hole) 0 20px, transparent 20px 36px); border-radius: 2px; } .film-band::before { top: 14px; } .film-band::after { bottom: 14px; } .film-band-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; color: #fff; } .film-band-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; color: #fff; } .film-band-head h2 .cm-icon { color: var(--amber); fill: var(--amber); } .film-band-all { display: inline-flex; align-items: center; gap: 2px; padding: 6px 14px; border-radius: var(--r-pill); color: #fff; font-size: 14px; font-weight: 700; border: 1.5px solid rgba(255, 255, 255, .55); } .film-band-all:hover { background: #fff; color: var(--red); } .film-band :focus-visible { outline-color: #fff; } /* ---------- ردیف افقی محصولات ---------- */ .rail-wrap { position: relative; } .woocommerce ul.products.rail, ul.products.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 214px); grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .rail-film { scrollbar-color: rgba(255, 255, 255, .35) transparent; } ul.products.rail > li { scroll-snap-align: start; } .rail-arrow { position: absolute; top: 40%; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(30, 33, 36, .14); transition: opacity .2s; } .rail-arrow.prev { right: -12px; } .rail-arrow.next { left: -12px; } .rail-wrap.at-start .rail-arrow.prev, .rail-wrap.at-end .rail-arrow.next, .rail-wrap.no-scroll .rail-arrow { opacity: 0; pointer-events: none; } /* ---------- شبکه‌ی محصولات ---------- */ .woocommerce ul.products, .woocommerce-page ul.products, ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0; } /* ---------- کارت محصول ---------- */ .p-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); transition: box-shadow .2s, border-color .2s; } .p-card:hover { border-color: #d7dade; box-shadow: 0 10px 28px rgba(30, 33, 36, .08); } .rail-film .p-card { border-color: transparent; } .p-thumb { position: relative; display: block; aspect-ratio: 1; background: #fff; padding: 14px; } .p-thumb img { width: 100%; height: 100%; object-fit: contain; margin: 0 !important; transition: transform .35s var(--ease); } .p-card:hover .p-thumb img { transform: scale(1.04); } .is-out .p-thumb img { filter: grayscale(1); opacity: .55; } .woocommerce span.onsale, .p-card .onsale, .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale { position: absolute; top: 12px !important; right: 12px !important; left: auto !important; z-index: 2; margin: 0 !important; min-width: 0; min-height: 0; padding: 2px 10px; line-height: 1.7; width: auto; height: auto; font-size: 13px; font-weight: 800; color: #fff; background: var(--red); border-radius: var(--r-pill); } .p-body { display: flex; flex-direction: column; flex: 1; padding: 0 14px 14px; } .p-title { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.7; } .p-title a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.4em; } .p-title a:hover { color: var(--red); } .p-timer { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 3px 8px; width: fit-content; font-size: 12px; color: var(--amber-ink); background: var(--amber-tint); border-radius: 6px; } .p-timer .t { font-weight: 800; direction: ltr; unicode-bidi: isolate; } .p-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .p-price, .woocommerce .p-price { font-size: 16px; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.5; min-height: 48px; justify-content: flex-end; } .p-price del { font-size: 13px; font-weight: 400; color: var(--muted); } .p-price ins { text-decoration: none; } .p-price .woocommerce-Price-currencySymbol, .price .woocommerce-Price-currencySymbol { font-size: .75em; font-weight: 500; margin-inline-start: 3px; } .p-out { color: var(--muted); font-size: 15px; } .price-call { color: var(--red); font-size: 14px; } .p-foot a.button, .woocommerce ul.products li.product .p-foot a.button { width: 100%; min-height: 42px; margin: 0; padding: 6px 12px; gap: 8px; font-size: 14px; font-weight: 700; background: #fff; color: var(--red); border: 1.5px solid var(--red); border-radius: var(--r-ctl); transition: background-color .15s, color .15s; } .p-foot a.button:hover, .woocommerce ul.products li.product .p-foot a.button:hover { background: var(--red); color: #fff; border-color: var(--red); } .p-foot a.button.loading { opacity: .65; pointer-events: none; } .p-foot a.button.loading .cm-icon { animation: cm-pulse .8s infinite; } .woocommerce ul.products li.product .button.loading::after, .p-foot a.button::after { display: none !important; } a.added_to_cart { display: none !important; } .p-foot a.button.added { background: var(--green); border-color: var(--green); color: #fff; } /* ---------- مزایا ---------- */ .perks { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: var(--r-card); padding: 8px; } .perk { display: flex; align-items: center; gap: 14px; padding: 18px; } .perk + .perk { border-inline-start: 1px solid var(--line); } .perk .cm-icon { color: var(--red); } .perk h3 { margin: 0; font-size: 15px; } .perk p { margin: 0; font-size: 13px; color: var(--ink-2); } .perk a { direction: ltr; unicode-bidi: isolate; font-weight: 700; } /* ---------- برندها ---------- */ .brand-strip { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; background: #fff; border-radius: var(--r-card); } .brand-strip a { height: 72px; display: grid; place-items: center; padding: 10px 14px; border-radius: var(--r-ctl); color: var(--ink-2); font-weight: 800; } .brand-strip a:hover { background: var(--bg); } .brand-strip img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; } .brand-strip a:hover img { filter: none; opacity: 1; } /* ---------- فروشگاه حضوری ---------- */ .visit { margin-top: 36px; } .visit-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; background: #fff; border-radius: var(--r-card); border-inline-start: 5px solid var(--red); } .visit-card h2 { font-size: 20px; } .visit-text p { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; color: var(--ink-2); } .visit-text .cm-icon { margin-top: 4px; color: var(--red); } .visit-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- وبلاگ ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .home-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-card { background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); transition: box-shadow .2s; } .post-card:hover { box-shadow: 0 10px 28px rgba(30, 33, 36, .08); } .post-thumb { display: block; aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; } .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); } .post-card:hover .post-thumb img { transform: scale(1.04); } .post-thumb-empty { height: 100%; display: grid; place-items: center; background: var(--red-tint); } .post-thumb-mark { width: 30%; opacity: .5; } .post-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); } .post-meta > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-inline-end: 12px; border-radius: 50%; background: #C5C9CE; vertical-align: middle; } .post-cat { padding: 1px 10px; border-radius: var(--r-pill); background: var(--red-tint); color: var(--red); font-weight: 700; } a.post-cat:hover { background: var(--red); color: #fff; } .post-title { font-size: 16px; margin: 0 0 8px; line-height: 1.7; } .post-title a { color: var(--ink); } .post-title a:hover { color: var(--red); } .post-excerpt { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.9; } .post-read { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 14px; } .post-card.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .post-card.is-featured .post-thumb { aspect-ratio: 16 / 10; } .post-card.is-featured .post-read { margin-top: 18px; padding-top: 0; } .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .post-card.is-featured .post-body { padding: 28px 32px; justify-content: center; } .post-card.is-featured .post-title { font-size: 23px; line-height: 1.6; } .post-card.is-featured .post-excerpt { font-size: 15px; } .home-blog-more { text-align: center; margin: 20px 0 0; } .blog-head { margin: 8px 0 22px; } .blog-head .page-title { font-size: 28px; } .blog-head .page-desc { margin: 6px 0 0; } .blog-head .page-desc p { margin: 0; } .blog-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; } .blog-cats .chip { background: #fff; border: 1px solid var(--line); } .blog-cats .chip.is-active { border-color: var(--red); } .entry { background: #fff; border-radius: var(--r-card); padding: 32px clamp(18px, 5vw, 64px) 40px; max-width: 880px; margin-inline: auto; } .single-entry .entry-head { margin-bottom: 20px; } .entry-title { font-size: clamp(22px, 3vw, 30px); line-height: 1.6; margin: 6px 0 0; } .entry-thumb { margin: 0 0 28px; border-radius: var(--r-ctl); overflow: hidden; } .entry-thumb img { width: 100%; } .entry-content { font-size: 16.5px; line-height: 2.1; } .entry-content > * { max-width: none; } .entry-content p, .entry-content li { text-align: justify; text-justify: inter-word; } .entry-content h2 { font-size: 22px; margin-top: 1.6em; } .entry-content h3 { font-size: 18px; margin-top: 1.4em; } .entry-content img { border-radius: var(--r-ctl); } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } .entry-content blockquote { margin: 1.5em 0; padding: 12px 20px; border-inline-start: 4px solid var(--red); background: var(--bg); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; } .entry-content ul, .entry-content ol { padding-inline-start: 22px; } .entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); } .entry-tags a { padding: 2px 12px; background: var(--bg); border-radius: var(--r-pill); font-size: 13px; color: var(--ink-2); } .single .breadcrumb { max-width: 880px; margin-inline: auto; } .related-posts { max-width: 880px; margin: 32px auto 0; } .related-posts h2 { font-size: 20px; } .related-posts .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ---------- وبلاگ: سربرگ، چیدمان و ستون کناری ---------- */ .blog-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; margin: 8px 0 16px; padding: 36px 40px; border-radius: 16px; background: var(--ink); color: #fff; } .blog-hero::before, .blog-hero::after { content: ""; position: absolute; right: 20px; left: 20px; height: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 18px, transparent 18px 32px); } .blog-hero::before { top: 12px; } .blog-hero::after { bottom: 12px; } .blog-hero-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--amber); } .blog-hero-title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); color: #fff; } .blog-hero-desc { margin-top: 8px; max-width: 60ch; color: #C9CDD2; font-size: 15px; } .blog-hero-desc p { margin: 0; } .blog-hero-mark { width: 120px; flex-shrink: 0; opacity: .9; } .blog-page .blog-cats { margin: 0 0 20px; } .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .blog-main .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-main .post-card.is-featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .blog-main .empty-state { margin-top: 0; } /* کارت تنهای ردیف آخر: تمام‌عرض و افقی تا جای خالی نماند */ .blog-main .blog-grid > .post-card:not(.is-featured):last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } .blog-main .blog-grid > .post-card:not(.is-featured):last-child:nth-child(even) .post-thumb { aspect-ratio: auto; height: 100%; min-height: 200px; } .blog-main .blog-grid > .post-card:not(.is-featured):last-child:nth-child(even) .post-body { padding: 22px 26px; justify-content: center; } .blog-side { position: sticky; top: 140px; display: grid; gap: 14px; } .side-box { background: #fff; border-radius: var(--r-card); padding: 18px; } .side-title { font-size: 15px; margin: 0 0 12px; padding-inline-start: 10px; border-inline-start: 3px solid var(--red); line-height: 1.5; } .side-search { position: relative; } .side-search input { padding-left: 46px; min-height: 44px; } .side-search button { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); } .side-search button:hover { color: var(--red); } .side-cats { list-style: none; margin: 0; padding: 0; } .side-cats a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--bg); } .side-cats li:last-child a { border-bottom: 0; } .side-cats a:hover, .side-cats a[aria-current] { color: var(--red); } .side-cats .count { min-width: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); font-size: 12px; text-align: center; } .side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .side-posts a { display: flex; gap: 10px; align-items: center; color: var(--ink); } .side-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--red-tint); display: grid; place-items: center; } .side-thumb img { width: 100%; height: 100%; object-fit: cover; } .side-thumb-mark { width: 36px; opacity: .55; } .side-post-text { display: flex; flex-direction: column; min-width: 0; } .side-post-title { font-size: 14px; font-weight: 700; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .side-posts a:hover .side-post-title { color: var(--red); } .side-post-date { font-size: 12px; color: var(--muted); } .side-cta { text-align: center; background: var(--red-tint); } .side-cta > .cm-icon { color: var(--red); } .side-cta h2 { font-size: 16px; margin: 6px 0; } .side-cta p { font-size: 13.5px; color: var(--ink-2); } .side-cta .btn { width: 100%; } .side-cta-phone { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .side-box.side-insta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 22px 18px; color: #fff; background: linear-gradient(135deg, #833AB4 0%, #E1306C 55%, #F77737 100%); transition: transform .2s var(--ease), box-shadow .2s; } .side-box.side-insta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225, 48, 108, .25); } .side-insta-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .45); margin-bottom: 4px; } .side-insta b { font-size: 15px; line-height: 1.7; } .side-insta bdi { font-size: 13px; opacity: .9; } .side-insta-btn { margin-top: 8px; padding: 6px 22px; border-radius: var(--r-pill); background: #fff; color: #C13584; font-size: 13px; font-weight: 800; } /* ---------- سؤالات متداول ---------- */ .faq-list { display: grid; gap: 10px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .2s, box-shadow .2s; } .faq-item[open] { border-color: var(--red); box-shadow: 0 6px 18px rgba(30, 33, 36, .06); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-weight: 700; font-size: 15.5px; line-height: 1.7; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--red); font-size: 20px; font-weight: 500; line-height: 1; transition: transform .2s var(--ease), background-color .2s; } .faq-item[open] summary::after { transform: rotate(45deg); background: var(--red-tint); } .faq-item summary:hover { color: var(--red); } .faq-answer { padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; line-height: 2; } .faq-answer p { margin: 0 0 .6em; } .faq-answer p:last-child { margin: 0; } .faq-answer a { font-weight: 700; } .faq-tab-title { font-size: 18px; } .woocommerce-Tabs-panel--cm_faq .faq-list { max-width: 820px; } .faq-more { margin: 16px 0 0; font-size: 14px; color: var(--muted); } .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 8px; } .faq-search { position: relative; margin-bottom: 14px; } .faq-search .cm-icon { position: absolute; top: 14px; right: 14px; color: var(--muted); pointer-events: none; } .faq-search input { padding-right: 44px; min-height: 50px; } .faq-page .faq-item summary { padding: 18px 20px; font-size: 16px; } .faq-page .faq-answer { padding: 0 20px 18px; } .faq-empty { padding: 20px; text-align: center; color: var(--muted); background: #fff; border-radius: var(--r-ctl); } .faq-contact { position: sticky; top: 140px; display: grid; gap: 10px; justify-items: center; padding: 24px 20px; text-align: center; background: #fff; border-radius: var(--r-card); } .faq-contact > .cm-icon { color: var(--red); } .faq-contact h2 { margin: 0; font-size: 17px; } .faq-contact p { margin: 0; font-size: 14px; color: var(--ink-2); } .faq-contact .btn { width: 100%; } .faq-hours { display: flex; align-items: center; gap: 6px; font-size: 13px !important; color: var(--muted) !important; } /* ---------- دیدگاه‌ها (وبلاگ) ---------- */ .comments-area { max-width: 880px; margin: 24px auto 0; background: #fff; border-radius: var(--r-card); padding: 28px clamp(18px, 4vw, 40px); } .comments-title { font-size: 20px; margin-bottom: 18px; } .comments-empty { color: var(--muted); } .comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; } .comment-list > li + li { margin-top: 12px; } .comment-list .children { margin: 12px 0 0; padding-inline-start: 28px; border-inline-start: 2px solid var(--line); } .comment-list .children li + li { margin-top: 12px; } .cm-comment { display: flex; gap: 14px; } .cm-comment-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } .cm-comment-main { flex: 1; min-width: 0; background: var(--bg); border-radius: var(--r-ctl); padding: 12px 16px; } .cm-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); } .cm-comment-author { font-size: 14.5px; color: var(--ink); } .cm-badge { padding: 0 8px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; } .cm-comment-head time { margin-inline-start: auto; } .cm-comment-text { margin-top: 6px; font-size: 15px; line-height: 2; } .cm-comment-text p { margin: 0 0 .5em; } .cm-comment-pending { margin: 6px 0 0; font-size: 13px; color: var(--amber-ink); } .cm-comment-actions { display: flex; gap: 14px; font-size: 13px; font-weight: 700; } .bypostauthor > .cm-comment .cm-comment-main { background: var(--red-tint); } .comment-respond { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .comment-reply-title { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 800; margin: 0 0 12px; } .comment-reply-title small a { font-size: 13px; font-weight: 500; } .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .comment-form > p { grid-column: 1 / -1; margin: 0 0 14px; } .comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: auto; } .comment-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } .comment-form .required { color: var(--red); } .comment-notes, .logged-in-as { font-size: 13px; color: var(--muted); } .logged-in-as a { color: var(--ink-2); } .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .comment-form-cookies-consent label { margin: 0; font-weight: 400; } .comment-form-url { display: none; } .comment-form .form-submit { margin: 4px 0 0; } /* ---------- نظرات محصول ---------- */ .woocommerce #reviews { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; } .woocommerce #reviews #comments { margin: 0; } .woocommerce #reviews .clear { display: none; } .woocommerce #reviews h2.woocommerce-Reviews-title { font-size: 18px !important; line-height: 1.7; margin-bottom: 16px; } .woocommerce #reviews #comments ol.commentlist { padding: 0; margin: 0; } .woocommerce #reviews #comments ol.commentlist li { margin: 0 0 12px; } .woocommerce #reviews #comments ol.commentlist li .comment_container { display: flex; gap: 12px; } .woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; float: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); } .woocommerce #reviews #comments ol.commentlist li .comment-text { flex: 1; margin: 0; border: 0; border-radius: var(--r-ctl); background: var(--bg); padding: 12px 16px; } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); margin: 0 0 6px; } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong { color: var(--ink); } .woocommerce #reviews #comments ol.commentlist li .comment-text .description p { margin: 0; line-height: 2; } .woocommerce #reviews .star-rating { float: left; font-size: 13px; } .woocommerce-noreviews { color: var(--muted); } .woocommerce #review_form_wrapper { position: sticky; top: 140px; } .woocommerce #review_form #respond { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; } .woocommerce #review_form #respond .comment-reply-title { font-size: 17px; font-weight: 800; display: block; margin-bottom: 12px; } .woocommerce #review_form #respond .comment-form { display: block; } .woocommerce #review_form #respond p { margin: 0 0 14px; } .woocommerce #review_form #respond label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; } .woocommerce #review_form #respond textarea { min-height: 120px; } .woocommerce #review_form #respond .form-submit input { width: 100%; } .woocommerce #review_form .comment-form-rating { margin-bottom: 14px; } .woocommerce p.stars { margin: 0; } .woocommerce p.stars a { width: 1.6em; height: 1.6em; font-size: 20px; margin-inline-end: 4px; } .woocommerce p.stars a::before { color: var(--amber); } .woocommerce #reviews .woocommerce-verification-required { background: var(--bg); padding: 16px; border-radius: var(--r-ctl); } .pagination, .woocommerce nav.woocommerce-pagination { margin-top: 28px; text-align: center; clear: both; } .nav-links, .woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; white-space: normal; } .woocommerce nav.woocommerce-pagination ul.page-numbers li { display: block !important; float: none !important; margin: 0 !important; border: 0 !important; overflow: visible !important; } .nav-links a.page-numbers, .nav-links span.page-numbers, .woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers { min-width: 42px; height: 42px; display: inline-grid !important; place-items: center; padding: 0 12px !important; background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); font-weight: 700; line-height: 1; } .nav-links span.page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--red) !important; border-color: var(--red); color: #fff !important; } .nav-links span.page-numbers.dots, .woocommerce nav.woocommerce-pagination ul li span.dots { background: transparent; border-color: transparent; } .nav-links a.page-numbers:hover, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--bg); color: var(--ink); border-color: #C5C9CE; } .empty-state { margin-top: 0; } .blog-side { position: sticky; top: 140px; display: grid; gap: 14px; } .side-box { background: #fff; border-radius: var(--r-card); padding: 18px; } .side-title { font-size: 15px; margin: 0 0 12px; padding-inline-start: 10px; border-inline-start: 3px solid var(--red); line-height: 1.5; } .side-search { position: relative; } .side-search input { padding-left: 46px; min-height: 44px; } .side-search button { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); } .side-search button:hover { color: var(--red); } .side-cats { list-style: none; margin: 0; padding: 0; } .side-cats a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--bg); } .side-cats li:last-child a { border-bottom: 0; } .side-cats a:hover, .side-cats a[aria-current] { color: var(--red); } .side-cats .count { min-width: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); font-size: 12px; text-align: center; } .side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .side-posts a { display: flex; gap: 10px; align-items: center; color: var(--ink); } .side-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--red-tint); display: grid; place-items: center; } .side-thumb img { width: 100%; height: 100%; object-fit: cover; } .side-thumb-mark { width: 36px; opacity: .55; } .side-post-text { display: flex; flex-direction: column; min-width: 0; } .side-post-title { font-size: 14px; font-weight: 700; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .side-posts a:hover .side-post-title { color: var(--red); } .side-post-date { font-size: 12px; color: var(--muted); } .side-cta { text-align: center; background: var(--red-tint); } .side-cta > .cm-icon { color: var(--red); } .side-cta h2 { font-size: 16px; margin: 6px 0; } .side-cta p { font-size: 13.5px; color: var(--ink-2); } .side-cta .btn { width: 100%; } .side-cta-phone { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); } /* ---------- سؤالات متداول ---------- */ .faq-list { display: grid; gap: 10px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .2s, box-shadow .2s; } .faq-item[open] { border-color: var(--red); box-shadow: 0 6px 18px rgba(30, 33, 36, .06); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-weight: 700; font-size: 15.5px; line-height: 1.7; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--red); font-size: 20px; font-weight: 500; line-height: 1; transition: transform .2s var(--ease), background-color .2s; } .faq-item[open] summary::after { transform: rotate(45deg); background: var(--red-tint); } .faq-item summary:hover { color: var(--red); } .faq-answer { padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; line-height: 2; } .faq-answer p { margin: 0 0 .6em; } .faq-answer p:last-child { margin: 0; } .faq-answer a { font-weight: 700; } .faq-tab-title { font-size: 18px; } .woocommerce-Tabs-panel--cm_faq .faq-list { max-width: 820px; } .faq-more { margin: 16px 0 0; font-size: 14px; color: var(--muted); } .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 8px; } .faq-search { position: relative; margin-bottom: 14px; } .faq-search .cm-icon { position: absolute; top: 14px; right: 14px; color: var(--muted); pointer-events: none; } .faq-search input { padding-right: 44px; min-height: 50px; } .faq-page .faq-item summary { padding: 18px 20px; font-size: 16px; } .faq-page .faq-answer { padding: 0 20px 18px; } .faq-empty { padding: 20px; text-align: center; color: var(--muted); background: #fff; border-radius: var(--r-ctl); } .faq-contact { position: sticky; top: 140px; display: grid; gap: 10px; justify-items: center; padding: 24px 20px; text-align: center; background: #fff; border-radius: var(--r-card); } .faq-contact > .cm-icon { color: var(--red); } .faq-contact h2 { margin: 0; font-size: 17px; } .faq-contact p { margin: 0; font-size: 14px; color: var(--ink-2); } .faq-contact .btn { width: 100%; } .faq-hours { display: flex; align-items: center; gap: 6px; font-size: 13px !important; color: var(--muted) !important; } /* ---------- دیدگاه‌ها (وبلاگ) ---------- */ .comments-area { max-width: 880px; margin: 24px auto 0; background: #fff; border-radius: var(--r-card); padding: 28px clamp(18px, 4vw, 40px); } .comments-title { font-size: 20px; margin-bottom: 18px; } .comments-empty { color: var(--muted); } .comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; } .comment-list > li + li { margin-top: 12px; } .comment-list .children { margin: 12px 0 0; padding-inline-start: 28px; border-inline-start: 2px solid var(--line); } .comment-list .children li + li { margin-top: 12px; } .cm-comment { display: flex; gap: 14px; } .cm-comment-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } .cm-comment-main { flex: 1; min-width: 0; background: var(--bg); border-radius: var(--r-ctl); padding: 12px 16px; } .cm-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); } .cm-comment-author { font-size: 14.5px; color: var(--ink); } .cm-badge { padding: 0 8px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; } .cm-comment-head time { margin-inline-start: auto; } .cm-comment-text { margin-top: 6px; font-size: 15px; line-height: 2; } .cm-comment-text p { margin: 0 0 .5em; } .cm-comment-pending { margin: 6px 0 0; font-size: 13px; color: var(--amber-ink); } .cm-comment-actions { display: flex; gap: 14px; font-size: 13px; font-weight: 700; } .bypostauthor > .cm-comment .cm-comment-main { background: var(--red-tint); } .comment-respond { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .comment-reply-title { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 800; margin: 0 0 12px; } .comment-reply-title small a { font-size: 13px; font-weight: 500; } .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .comment-form > p { grid-column: 1 / -1; margin: 0 0 14px; } .comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: auto; } .comment-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } .comment-form .required { color: var(--red); } .comment-notes, .logged-in-as { font-size: 13px; color: var(--muted); } .logged-in-as a { color: var(--ink-2); } .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .comment-form-cookies-consent label { margin: 0; font-weight: 400; } .comment-form-url { display: none; } .comment-form .form-submit { margin: 4px 0 0; } /* ---------- نظرات محصول ---------- */ .woocommerce #reviews { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; } .woocommerce #reviews #comments { margin: 0; } .woocommerce #reviews .clear { display: none; } .woocommerce #reviews h2.woocommerce-Reviews-title { font-size: 18px !important; line-height: 1.7; margin-bottom: 16px; } .woocommerce #reviews #comments ol.commentlist { padding: 0; margin: 0; } .woocommerce #reviews #comments ol.commentlist li { margin: 0 0 12px; } .woocommerce #reviews #comments ol.commentlist li .comment_container { display: flex; gap: 12px; } .woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; float: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); } .woocommerce #reviews #comments ol.commentlist li .comment-text { flex: 1; margin: 0; border: 0; border-radius: var(--r-ctl); background: var(--bg); padding: 12px 16px; } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); margin: 0 0 6px; } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong { color: var(--ink); } .woocommerce #reviews #comments ol.commentlist li .comment-text .description p { margin: 0; line-height: 2; } .woocommerce #reviews .star-rating { float: left; font-size: 13px; } .woocommerce-noreviews { color: var(--muted); } .woocommerce #review_form_wrapper { position: sticky; top: 140px; } .woocommerce #review_form #respond { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; } .woocommerce #review_form #respond .comment-reply-title { font-size: 17px; font-weight: 800; display: block; margin-bottom: 12px; } .woocommerce #review_form #respond .comment-form { display: block; } .woocommerce #review_form #respond p { margin: 0 0 14px; } .woocommerce #review_form #respond label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; } .woocommerce #review_form #respond textarea { min-height: 120px; } .woocommerce #review_form #respond .form-submit input { width: 100%; } .woocommerce #review_form .comment-form-rating { margin-bottom: 14px; } .woocommerce p.stars { margin: 0; } .woocommerce p.stars a { width: 1.6em; height: 1.6em; font-size: 20px; margin-inline-end: 4px; } .woocommerce p.stars a::before { color: var(--amber); } .woocommerce #reviews .woocommerce-verification-required { background: var(--bg); padding: 16px; border-radius: var(--r-ctl); } .pagination, .woocommerce nav.woocommerce-pagination { margin-top: 28px; text-align: center; } .nav-links, .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; flex-wrap: wrap; border: 0 !important; margin: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0 !important; } .page-numbers, .woocommerce nav.woocommerce-pagination ul li .page-numbers { min-width: 42px; height: 42px; display: inline-grid !important; place-items: center; padding: 0 10px !important; background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); font-weight: 700; } .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--red) !important; border-color: var(--red); color: #fff !important; } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--bg); color: var(--ink); } .empty-state { text-align: center; max-width: 520px; margin: 40px auto; padding: 40px 24px; background: #fff; border-radius: var(--r-card); } .empty-state > .cm-icon { color: var(--muted); margin-bottom: 8px; } .shop-empty { max-width: 640px; } .shop-empty h2 { font-size: 19px; } .shop-empty p { color: var(--ink-2); } .shop-empty-cats { justify-content: center; margin: 16px 0 !important; } .shop-empty-cats .chip { background: var(--bg); } .shop-empty-call { font-size: 14px; } .big-404 { font-size: 88px; font-weight: 800; line-height: 1; color: var(--red); margin: 0 0 8px; } .search-form { display: flex; gap: 8px; margin: 16px 0; } .search-form input[type="search"] { flex: 1; } /* ---------- کلاس‌های چینش وردپرس (تصاویر داخل محتوا) ---------- */ .aligncenter { display: block; margin-inline: auto !important; } .alignright { float: right; margin: .3em 0 1em 1.4em; } .alignleft { float: left; margin: .3em 1.4em 1em 0; } .alignnone { margin: 1em 0; } .wp-caption { max-width: 100%; } .wp-caption-text, figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; } @media (max-width: 600px) { .alignright, .alignleft { float: none; margin: 1em auto; display: block; } } /* ---------- فرم‌ها ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], select, textarea, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-ctl); font-size: 15px; line-height: 1.6; color: var(--ink); transition: border-color .2s, box-shadow .2s; } textarea, .woocommerce form .form-row textarea { min-height: 96px; resize: vertical; } input:focus, select:focus, textarea:focus, .woocommerce form .form-row .input-text:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); } ::placeholder { color: #A3A8AE; opacity: 1; } [dir="ltr"]::placeholder { text-align: right; } .woocommerce form .form-row { padding: 0; margin: 0 0 16px; } .woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.6; } .woocommerce form .form-row .required { color: var(--red); text-decoration: none; } .woocommerce form .form-row .optional { display: none; } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--red); } .woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--line); } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); } .woocommerce form .form-row .description, .woocommerce form .form-row span.description { display: block !important; position: static !important; margin-top: 6px; padding: 0 !important; background: none !important; color: var(--muted) !important; font-size: 13px; } .woocommerce form .form-row .description::before { display: none; } /* select2 / selectWoo */ .select2-container .select2-selection--single { height: 48px; border: 1.5px solid var(--line) !important; border-radius: var(--r-ctl) !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 45px !important; padding-right: 14px !important; padding-left: 34px !important; color: var(--ink) !important; } .select2-container .select2-selection--single .select2-selection__arrow { height: 46px !important; left: 8px !important; right: auto !important; } .select2-container--focus .select2-selection--single, .select2-container--open .select2-selection--single { border-color: var(--red) !important; } .select2-dropdown { border: 1.5px solid var(--red) !important; border-radius: var(--r-ctl) !important; overflow: hidden; font-family: var(--font); } .select2-search--dropdown .select2-search__field { min-height: 40px; border-radius: 8px !important; } .select2-results__option { padding: 8px 14px !important; font-size: 14px; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--red) !important; color: #fff !important; } .select2-container--disabled .select2-selection--single { background: var(--bg) !important; } /* ---------- پیام‌های ووکامرس ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { margin: 0 0 20px !important; padding: 14px 52px 14px 18px !important; border: 0 !important; border-inline-start: 4px solid var(--green) !important; border-radius: var(--r-ctl); background: #fff !important; color: var(--ink) !important; font-size: 14px; line-height: 1.8; box-shadow: 0 1px 0 var(--line); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { right: 18px !important; left: auto !important; top: 15px !important; } .woocommerce-message::before { color: var(--green) !important; } .woocommerce-info { border-inline-start-color: var(--amber) !important; } .woocommerce-info::before { color: var(--amber) !important; } .woocommerce-error { border-inline-start-color: var(--red) !important; list-style: none; } .woocommerce-error::before { color: var(--red) !important; } .woocommerce-message .button, .woocommerce-info .button { float: left !important; min-height: 36px; padding: 4px 14px; font-size: 13px; } /* ---------- صفحه‌ی فروشگاه ---------- */ .shop-head .page-title { font-size: 24px; } .shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; } .shop-layout > * { min-width: 0; } .shop-filters { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 160px); overflow: auto; scrollbar-width: thin; } .filters-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } .filters-head h2 { margin: 0; font-size: 17px; } .filters-clear { font-size: 13px; font-weight: 700; } .filters-close { display: none; } .filter-box { background: #fff; border-radius: var(--r-card); padding: 16px 18px; } .filter-title { font-size: 15px; margin: 0 0 10px; } .filter-cats, .filter-brands { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; } .filter-cats a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--ink-2); } .filter-cats a:hover, .filter-cats a.is-active { color: var(--red); } .filter-cats a.is-active { font-weight: 700; } .filter-cats .count { color: var(--muted); font-size: 12px; background: var(--bg); padding: 0 8px; border-radius: var(--r-pill); align-self: center; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-weight: 700; font-size: 14px; } .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--line); transition: background-color .2s; } .switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); } .switch.is-on { background: var(--red); } .switch.is-on::after { transform: translateX(-18px); } .check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink-2); font-size: 14px; } .check-row .box { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid #C5C9CE; border-radius: 6px; color: #fff; flex-shrink: 0; } .check-row.is-on { color: var(--ink); font-weight: 700; } .check-row.is-on .box { background: var(--red); border-color: var(--red); } .price-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .price-filter label span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; } .price-filter input { min-height: 40px; padding: 6px 10px; font-size: 14px; } .price-filter button { grid-column: 1 / -1; } .shop-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 14px; background: #fff; border-radius: var(--r-card); } .filters-open { display: none; } .sort-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; } .sort-label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; margin-inline-end: 6px; } .chip { padding: 6px 12px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--ink-2); } .chip:hover { color: var(--red); } .chip.is-active { color: var(--red); font-weight: 700; background: var(--red-tint); } .woocommerce .woocommerce-result-count { margin: 0; font-size: 13px; color: var(--muted); float: none; } .woocommerce-no-products-found .woocommerce-info { margin: 0 !important; } /* ---------- صفحه‌ی محصول ---------- */ .single-product .shop-main-area .breadcrumb { margin-bottom: 14px; } .pd { position: relative; } .pd-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 320px; gap: 28px; align-items: start; background: #fff; border-radius: var(--r-card); padding: 24px; } .pd-gallery { position: relative; min-width: 0; } .woocommerce div.product .pd-gallery div.images, .woocommerce div.product div.summary.pd-info, .woocommerce-page div.product .pd-gallery div.images { width: auto !important; float: none !important; margin: 0 !important; } .pd-gallery .onsale { top: 12px; right: 12px; } .woocommerce div.product div.images img { border-radius: var(--r-ctl); } .woocommerce div.product div.images .flex-control-thumbs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 10px 0 0 !important; padding: 2px 2px 8px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #C5C9CE transparent; -webkit-overflow-scrolling: touch; } .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { height: 6px; } .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-thumb { background: #C5C9CE; border-radius: 6px; } .woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 72px; width: 72px !important; float: none !important; margin: 0 !important; scroll-snap-align: start; } .woocommerce div.product div.images .flex-control-thumbs li img { border: 1.5px solid var(--line); border-radius: 8px; opacity: 1; padding: 4px; background: #fff; } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--red); } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { left: 12px; right: auto; top: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .pd-info { min-width: 0; } .pd-brand { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--red); } .pd-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); } .pd-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 700; } .pd-rating .cm-icon { color: var(--amber); fill: var(--amber); } .pd-rating span { color: var(--muted); font-weight: 400; } .pd-rating.is-empty { color: var(--red); font-weight: 500; } .pd-keys h2 { font-size: 16px; margin: 0 0 10px; } .pd-keys ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pd-keys li { display: flex; gap: 8px; font-size: 14px; line-height: 1.8; } .pd-keys li::before { content: ""; width: 5px; height: 5px; margin-top: 11px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .pd-keys li span { color: var(--muted); } .pd-keys li span::after { content: ":"; } .pd-keys li b { font-weight: 500; color: var(--ink); } .pd-more { display: inline-flex; align-items: center; gap: 2px; margin: 10px 0 16px; font-size: 13px; font-weight: 700; } .pd-buy { position: sticky; top: 140px; display: grid; gap: 12px; } .pd-buy-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; } .pd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pd-off { padding: 2px 10px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 13px; font-weight: 800; } .woocommerce .pd-price-row p.price { margin: 0; flex-direction: column; align-items: flex-end; gap: 0; margin-inline-start: auto; } .pd-timer { margin: 10px 0 0; } .pd-buy form.cart { margin: 16px 0 0 !important; } .pd-buy .stock { margin: 12px 0 0; } .pd-soldout { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--red); } .pd-soldout-hint { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; } .pd-call { width: 100%; } .pd-buy .product-perks { margin: 16px 0 0; padding: 14px 0 0; background: none; border-top: 1px solid var(--line); border-radius: 0; } .pd-buy .product_meta { padding: 0 6px; } .pd > .price-history, .pd > .woocommerce-tabs, .pd > .related, .pd > .upsells { margin-top: 20px; } .pd > .woocommerce-tabs { background: #fff; border-radius: var(--r-card); padding: 8px 24px 24px; } .pd > .related, .pd > .upsells { background: transparent; } .pd > .price-history { background: #fff; } .woocommerce div.product .product_title { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.6; margin-bottom: 12px; } .woocommerce div.product .woocommerce-product-rating { margin-bottom: 10px; } .woocommerce .star-rating span::before, .woocommerce p.stars a { color: var(--amber); } .woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0; font-size: 26px; font-weight: 800; color: var(--ink); } .woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 16px; font-weight: 400; color: var(--muted); opacity: 1; } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; color: var(--red); } .woocommerce-product-details__short-description { color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .woocommerce-product-details__short-description ul { padding-inline-start: 18px; margin: 0; } .woocommerce div.product .stock { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; } .woocommerce div.product .stock.in-stock { color: var(--green); background: var(--green-tint); } .woocommerce div.product .stock.out-of-stock { color: var(--red); background: var(--red-tint); } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 16px 0; } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; } .woocommerce div.product form.cart .button { flex: 1; min-height: 52px; font-size: 16px; float: none; } .pd-buy form.cart, .pd-buy .woocommerce-variation-add-to-cart { flex-wrap: wrap; } .pd-buy form.cart .button, .pd-buy .woocommerce-variation-add-to-cart .button { flex: 1 1 100%; white-space: nowrap; } .pd-buy .quantity.cm-qty { height: 46px; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.variations_form { display: block; } .woocommerce div.product form.cart .variations { margin-bottom: 12px; border: 0; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { display: block; padding: 0 0 6px; text-align: right; line-height: 1.6; } .woocommerce div.product form.cart .variations label { font-weight: 700; } .woocommerce div.product form.cart .reset_variations { font-size: 13px; } .woocommerce-variation-add-to-cart { display: flex; gap: 10px; } .woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price { font-size: 22px; } .quantity.cm-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: #fff; height: 52px; } .woocommerce .quantity.cm-qty .qty, .quantity.cm-qty input.qty { width: 44px; min-height: 0; height: 100%; padding: 0; border: 0; text-align: center; font-weight: 800; box-shadow: none; -moz-appearance: textfield; appearance: textfield; } .quantity.cm-qty input::-webkit-outer-spin-button, .quantity.cm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { width: 40px; height: 100%; border: 0; background: transparent; color: var(--red); font-size: 20px; font-weight: 700; } .qty-btn:hover { background: var(--red-tint); } .woocommerce-cart .quantity.cm-qty { height: 44px; } .product-perks { list-style: none; margin: 16px 0; padding: 14px 16px; background: var(--bg); border-radius: var(--r-ctl); display: grid; gap: 8px; } .product-perks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); } .product-perks .cm-icon { color: var(--red); } .product-perks a { direction: ltr; unicode-bidi: isolate; font-weight: 700; } .product_meta { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .product_meta a { color: var(--ink-2); } .woocommerce div.product .woocommerce-tabs { margin-top: 16px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 4px; padding: 0 !important; margin: 0 0 20px !important; border-bottom: 1px solid var(--line); overflow-x: auto; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 16px !important; color: var(--ink-2) !important; font-weight: 700 !important; border-bottom: 3px solid transparent; white-space: nowrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--red) !important; border-bottom-color: var(--red); } .woocommerce div.product .woocommerce-tabs .panel { margin: 0; font-size: 15px; line-height: 2; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: 18px; } /* محتوای تب توضیحات: تمام‌عرض، تصاویر و جدول‌ها و ویدیوها واکنش‌گرا */ .woocommerce div.product .woocommerce-tabs .panel.entry-content > * { max-width: none; } .woocommerce-Tabs-panel--description { font-size: 15.5px; line-height: 2.1; color: var(--ink-2); } .woocommerce-Tabs-panel--description h2, .woocommerce-Tabs-panel--description h3, .woocommerce-Tabs-panel--description h4 { color: var(--ink); margin: 1.4em 0 .5em; line-height: 1.6; } .woocommerce-Tabs-panel--description h2 { font-size: 20px; } .woocommerce-Tabs-panel--description h3 { font-size: 17px; } .woocommerce-Tabs-panel--description > :first-child { margin-top: 0; } .woocommerce-Tabs-panel--description p { margin: 0 0 1em; } .woocommerce-Tabs-panel--description strong, .woocommerce-Tabs-panel--description b { color: var(--ink); } .woocommerce-Tabs-panel--description img { height: auto; max-width: 100%; border-radius: var(--r-ctl); } .woocommerce-Tabs-panel--description figure { margin: 1.2em 0; max-width: 100%; } .woocommerce-Tabs-panel--description ul, .woocommerce-Tabs-panel--description ol { padding-inline-start: 22px; margin: 0 0 1em; } .woocommerce-Tabs-panel--description li { margin-bottom: .3em; } .woocommerce-Tabs-panel--description table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; display: block; overflow-x: auto; } .woocommerce-Tabs-panel--description th, .woocommerce-Tabs-panel--description td { padding: 10px 12px; border: 1px solid var(--line); text-align: right; } .woocommerce-Tabs-panel--description th { background: var(--bg); color: var(--ink); } .woocommerce-Tabs-panel--description iframe, .woocommerce-Tabs-panel--description video { max-width: 100%; border-radius: var(--r-ctl); } .woocommerce-Tabs-panel--description iframe[src*="aparat"], .woocommerce-Tabs-panel--description iframe[src*="youtube"] { width: 100%; aspect-ratio: 16 / 9; height: auto; } .woocommerce-Tabs-panel--description::after { content: ""; display: block; clear: both; } .woocommerce table.shop_attributes { border: 0; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); font-style: normal; text-align: right; } .woocommerce table.shop_attributes th { width: 200px; color: var(--ink-2); background: var(--bg); } .woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: transparent; } .related > h2, .upsells > h2 { font-size: 20px; margin: 16px 0 14px; } /* نمودار قیمت */ .price-history { border: 1px solid var(--line); border-radius: var(--r-ctl); } .price-history summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 700; list-style: none; } .price-history summary::-webkit-details-marker { display: none; } .price-history summary .cm-icon { color: var(--red); } .ph-hint { font-weight: 400; color: var(--muted); font-size: 13px; } .ph-body { padding: 0 16px 16px; } .ph-chart { width: 100%; height: 140px; color: var(--red); display: block; } .ph-dot { fill: var(--red); stroke: #fff; stroke-width: 2; } .ph-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); flex-direction: row-reverse; } .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; } .ph-stats div { background: var(--bg); border-radius: 8px; padding: 8px 12px; } .ph-stats dt { font-size: 12px; color: var(--muted); } .ph-stats dd { margin: 0; font-weight: 800; } /* نوار خرید چسبان موبایل */ .sticky-buy { display: none; } /* ---------- سبد خرید (صفحه) ---------- */ .wc-page .page-head { margin-bottom: 16px; } .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop, .woocommerce-cart .woocommerce > .woocommerce-message, .woocommerce-cart .woocommerce > .cross-sells { grid-column: 1 / -1; } .woocommerce-cart-form { background: #fff; border-radius: var(--r-card); padding: 8px 20px; } .woocommerce table.shop_table { border: 0; border-radius: 0; margin: 0; border-collapse: collapse; } .woocommerce table.shop_table th { font-weight: 700; color: var(--muted); font-size: 13px; padding: 12px 8px; text-align: right; } .woocommerce table.shop_table td { border-top: 1px solid var(--line); padding: 16px 8px; text-align: right; } .woocommerce table.shop_table td.product-name a { color: var(--ink); font-weight: 700; } .woocommerce table.cart img { width: 72px !important; border-radius: 10px; background: var(--bg); } .woocommerce a.remove { color: var(--muted) !important; font-weight: 400; width: 28px; height: 28px; line-height: 26px; font-size: 20px; } .woocommerce a.remove:hover { background: var(--red-tint) !important; color: var(--red) !important; } .woocommerce table.cart td.actions { padding-top: 16px; } .woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; } .woocommerce table.cart td.actions .coupon .input-text { width: 200px; min-height: 46px; } .woocommerce table.cart td.actions > .button { float: left; background: #fff; color: var(--ink); border-color: var(--line); } .cart-collaterals { width: 100%; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; background: #fff; border-radius: var(--r-card); padding: 20px; position: sticky; top: 140px; } .cart_totals h2 { font-size: 18px; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 12px 0; border-top: 1px solid var(--line); vertical-align: top; } .cart_totals .order-total .amount { color: var(--red); font-size: 18px; } .wc-proceed-to-checkout { padding-bottom: 0 !important; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 17px !important; } .cart-empty.woocommerce-info { text-align: center; padding: 40px 20px !important; font-size: 16px; } .return-to-shop { text-align: center; } /* ---------- صفحه‌ی پرداخت ---------- */ .woocommerce-checkout .site-main { padding-top: 16px; } .checkout-steps { list-style: none; margin: 0 auto 24px; padding: 0; display: flex; justify-content: center; align-items: center; gap: 0; max-width: 640px; counter-reset: none; } .checkout-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; } .checkout-steps li + li::before { content: ""; width: clamp(24px, 8vw, 80px); height: 2px; background: var(--line); margin: 0 12px; } .checkout-steps li.is-done + li::before, .checkout-steps li.is-current::before { background: var(--red); } .checkout-steps a { display: flex; align-items: center; gap: 8px; color: var(--ink); } .step-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--line); font-size: 13px; } .is-done .step-dot { background: var(--red); border-color: var(--red); color: #fff; } .is-current { color: var(--ink) !important; } .is-current .step-dot { border-color: var(--red); color: var(--red); } .woocommerce-form-coupon-toggle .woocommerce-info { background: #fff !important; } .woocommerce form.checkout_coupon { background: #fff; border: 1px dashed var(--line); border-radius: var(--r-card); padding: 18px; margin: 0 0 20px; } .woocommerce form.checkout_coupon p:not(.form-row) { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); } .woocommerce form.checkout_coupon .form-row { width: auto; float: none; display: inline-block; margin: 0 0 0 8px; vertical-align: top; } .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; } .checkout-card { background: #fff; border-radius: var(--r-card); padding: 24px; } .checkout-card-title { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 18px; } .checkout-card-title .cm-icon { color: var(--red); } .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { width: 100%; } .woocommerce-billing-fields > h3, .woocommerce-additional-fields > h3 { display: none; } .woocommerce-billing-fields__field-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } .woocommerce-billing-fields__field-wrapper .form-row-wide { width: 100%; } .cm-hidden-field, #billing_country_field { display: none !important; } .woocommerce-shipping-fields:empty, .woocommerce-additional-fields:empty { display: none; } .woocommerce form .form-row#billing_phone_field input, .woocommerce form .form-row#billing_postcode_field input { text-align: left; letter-spacing: .04em; } .checkout-side { position: sticky; top: 140px; } .woocommerce table.woocommerce-checkout-review-order-table { font-size: 14px; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0 !important; } .woocommerce-checkout-review-order-table .product-name { color: var(--ink); line-height: 1.7; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 400; } .woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table th:last-child { text-align: left !important; } .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 16px; } .woocommerce-checkout-review-order-table .order-total .amount { color: var(--red); font-size: 18px; } .woocommerce-checkout #payment, .woocommerce-checkout #payment.woocommerce-checkout-payment { background: transparent; border-radius: 0; margin-top: 16px; } .woocommerce-checkout #payment ul.payment_methods { padding: 0 0 12px; border-bottom: 1px solid var(--line); } .woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding: 12px 14px; margin-bottom: 8px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); line-height: 1.8; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--red); background: var(--red-tint); } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li img { display: inline-block; max-height: 28px; vertical-align: middle; margin: 0 6px; } .woocommerce-checkout #payment div.payment_box { background: #fff; color: var(--ink-2); font-size: 13px; border-radius: 8px; margin: 8px 0 0; padding: 10px 12px; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment div.form-row.place-order { padding: 12px 0 0; margin: 0; } .woocommerce-checkout #payment #place_order { width: 100%; min-height: 56px; font-size: 17px; float: none; } .woocommerce-privacy-policy-text p, .woocommerce-terms-and-conditions-wrapper { font-size: 12.5px; color: var(--muted); } .secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); } .secure-note .cm-icon { color: var(--green); } /* ---------- گزینه‌های ارسال در خلاصه‌ی سفارش (تمام‌عرض) ---------- */ /* جدول‌های خلاصه (پرداخت و سبد خرید) به‌صورت ردیف‌های انعطاف‌پذیر تا گزینه‌های ارسال تمام‌عرض باشند */ .woocommerce .cart_totals table.shop_table, .woocommerce .cart_totals table.shop_table tbody { display: block; width: 100%; } .woocommerce .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); } .woocommerce .cart_totals table.shop_table tr:first-child { border-top: 0; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { display: block; border: 0 !important; padding: 12px 0 !important; background: none; } .woocommerce .cart_totals table.shop_table td::before { display: none !important; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals { flex-direction: column; gap: 0; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th, .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td { width: 100%; text-align: right !important; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th { padding-bottom: 6px !important; } .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td { padding-top: 0 !important; } .woocommerce .cart_totals tr.order-total { border-top: 2px solid var(--ink) !important; } .woocommerce-shipping-calculator .shipping-calculator-button { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; } .woocommerce-shipping-calculator .shipping-calculator-button::after { display: none; } .woocommerce-shipping-calculator .shipping-calculator-form { padding: 12px 0 0; } .woocommerce table.woocommerce-checkout-review-order-table, .woocommerce table.woocommerce-checkout-review-order-table thead, .woocommerce table.woocommerce-checkout-review-order-table tbody, .woocommerce table.woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; } .woocommerce table.woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); } .woocommerce table.woocommerce-checkout-review-order-table thead tr { border-top: 0; } .woocommerce table.woocommerce-checkout-review-order-table th, .woocommerce table.woocommerce-checkout-review-order-table td { display: block; border: 0 !important; background: none; } .woocommerce table.woocommerce-checkout-review-order-table .product-name { flex: 1; } .woocommerce table.woocommerce-checkout-review-order-table tr.order-total { border-top: 2px solid var(--ink); } .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { flex-direction: column; gap: 0; } .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { width: 100%; text-align: right !important; } .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { padding-bottom: 6px !important; } .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { padding-top: 0 !important; } .woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .woocommerce ul#shipping_method li { position: relative; margin: 0 !important; padding: 0 !important; text-indent: 0; line-height: 1.6; } .woocommerce ul#shipping_method li input { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); margin: 0 !important; accent-color: var(--red); } .woocommerce ul#shipping_method li label { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 42px 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; } .woocommerce ul#shipping_method li label:hover { border-color: #C5C9CE; } .woocommerce ul#shipping_method li input:checked + label { border-color: var(--red); background: var(--red-tint); font-weight: 700; } .woocommerce ul#shipping_method li input[type="hidden"] + label { padding-right: 14px; } .woocommerce ul#shipping_method .amount { font-weight: 800; white-space: nowrap; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; } /* ---------- کد تخفیف بالای دکمه‌ی ثبت سفارش ---------- */ .cm-coupon { margin: 0 0 14px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: var(--r-ctl); background: #fff; } .cm-coupon-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .cm-coupon-label .cm-icon { color: var(--red); } .cm-coupon-row { display: flex; gap: 8px; } .cm-coupon-row .cm-coupon-input { flex: 1; min-height: 44px; } .cm-coupon-apply { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: #fff; color: var(--ink); font-weight: 700; } .cm-coupon-apply:hover { background: var(--ink); color: #fff; } .cm-coupon.is-loading { opacity: .6; pointer-events: none; } .cm-coupon-msg:empty { display: none; } .cm-coupon-msg { margin-top: 10px; } .cm-coupon-msg .woocommerce-error, .cm-coupon-msg .woocommerce-message, .cm-coupon-msg .woocommerce-info { margin: 0 !important; padding: 8px 12px !important; font-size: 13px; box-shadow: none; } .cm-coupon-msg .woocommerce-error::before, .cm-coupon-msg .woocommerce-message::before, .cm-coupon-msg .woocommerce-info::before { display: none; } .woocommerce-checkout-review-order-table .cart-discount td { color: var(--green); } .woocommerce-remove-coupon { font-size: 12px; margin-inline-start: 6px; } /* ---------- صفحه‌ی تشکر و صفحه‌ی پرداخت سفارش ---------- */ .woocommerce-order-received .wc-content > .woocommerce, .woocommerce-order-pay .wc-content > .woocommerce { max-width: 880px; margin: 0 auto; } .woocommerce-order { background: none; padding: 0; display: grid; gap: 16px; } .woocommerce-thankyou-order-received, .woocommerce-order > .woocommerce-notice--success { margin: 0 !important; padding: 22px 24px 22px 24px !important; background: #fff !important; border-radius: var(--r-card); border-inline-start: 5px solid var(--green) !important; font-size: 18px; font-weight: 800; color: var(--ink) !important; box-shadow: none; } .woocommerce-thankyou-order-received::before, .woocommerce-order > .woocommerce-notice--success::before { display: none; } .woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 !important; padding: 8px; background: #fff; border-radius: var(--r-card); list-style: none; } .woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; } .woocommerce ul.order_details li { float: none; margin: 0; padding: 12px 16px; border: 0 !important; background: none; border-radius: 0; font-size: 12.5px; color: var(--muted); text-transform: none; line-height: 1.6; } .woocommerce ul.order_details li + li { border-inline-start: 1px solid var(--line) !important; } .woocommerce ul.order_details li strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; color: var(--ink); } .woocommerce ul.order_details li.total strong, .woocommerce ul.order_details li.total .amount { color: var(--red); } .woocommerce-order-details, .woocommerce-customer-details { background: #fff; border-radius: var(--r-card); padding: 20px 24px; margin: 0 !important; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 18px; } .woocommerce-order-details table.shop_table { font-size: 14px; } .woocommerce-order-details table.shop_table tfoot th, .woocommerce-order-details table.shop_table tfoot td { border-top: 1px solid var(--line); } .woocommerce-order-details table.shop_table tfoot tr:last-child .amount { color: var(--red); font-size: 17px; font-weight: 800; } .woocommerce-customer-details address { border: 0 !important; padding: 0 !important; font-style: normal; line-height: 2; color: var(--ink-2); } .woocommerce-customer-details .woocommerce-column--billing-address, .woocommerce-customer-details .woocommerce-column--shipping-address { width: auto; float: none; } /* صفحه‌ی پرداخت سفارش (بعد از ثبت، رفتن به درگاه یا پرداخت دوباره) */ .woocommerce-order-pay .wc-content > .woocommerce { display: grid; gap: 16px; } .woocommerce-order-pay .wc-content > .woocommerce > :not(ul.order_details):not(.woocommerce-notices-wrapper):not(.clear) { background: #fff; border-radius: var(--r-card); padding: 20px 24px; } .woocommerce-order-pay .wc-content > .woocommerce > p { margin: 0; } .woocommerce-order-pay .wc-content > .woocommerce > .clear { display: none; } .woocommerce-order-pay #order_review { background: #fff; border-radius: var(--r-card); padding: 20px 24px; } .woocommerce-order-pay #order_review table.shop_table { margin-bottom: 16px; } .woocommerce-order-pay #payment { background: transparent !important; } .woocommerce-order-pay #payment ul.payment_methods { padding: 0 0 12px; } .woocommerce-order-pay #payment ul.payment_methods li { list-style: none; padding: 12px 14px; margin-bottom: 8px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); } .woocommerce-order-pay #payment ul.payment_methods li:has(input:checked) { border-color: var(--red); background: var(--red-tint); } .woocommerce-order-pay #place_order { width: 100%; min-height: 54px; float: none; } .woocommerce-order-pay form input[type="submit"], .woocommerce-order-pay form button[type="submit"], .woocommerce-order-pay .wc-content input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 28px; background: var(--red); color: #fff; border: 0; border-radius: var(--r-ctl); font: 700 16px var(--font); cursor: pointer; } .woocommerce-order-pay a.cancel, .woocommerce-order-pay .wc-content a[href*="cancel_order"] { display: inline-flex; align-items: center; min-height: 50px; padding: 10px 20px; margin-inline-start: 8px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); color: var(--ink-2); font-weight: 700; } /* ---------- کارت به کارت ---------- */ .c2c { background: #fff; border-radius: var(--r-card); padding: 24px; } .c2c-head h2 { font-size: 20px; margin-bottom: 4px; } .c2c-head p { color: var(--ink-2); margin: 0 0 12px; } .c2c-steps { list-style: none; margin: 0; padding: 0; counter-reset: c2c; display: grid; gap: 22px; } .c2c-steps > li { counter-increment: c2c; position: relative; padding-inline-start: 44px; } .c2c-steps > li::before { content: counter(c2c); position: absolute; top: 0; right: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; } .c2c-steps h3 { font-size: 16px; font-weight: 700; line-height: 1.9; margin: 0 0 12px; } .c2c-amount, .c2c-amount .amount { color: var(--red); font-weight: 800; } .c2c-card { position: relative; max-width: 420px; margin-inline: auto; aspect-ratio: 1.6; padding: 22px 24px; border-radius: 16px; color: #fff; background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .c2c-card::before { content: ""; position: absolute; top: 10px; right: 16px; left: 16px; height: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 12px, transparent 12px 22px); } .c2c-card-top { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .c2c-bank { font-weight: 800; font-size: 16px; } .c2c-mark { width: 44px; height: auto; } .c2c-number { margin: 0; font-size: clamp(20px, 5.4vw, 28px); font-weight: 800; letter-spacing: .06em; text-align: center; word-spacing: .2em; } .c2c-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: #D5D8DC; } .c2c-copy { padding: 6px 14px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--r-pill); background: transparent; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .c2c-copy:hover, .c2c-copy.is-copied { background: #fff; color: var(--ink); } .c2c-copy-sm { border-color: var(--line); color: var(--ink); padding: 2px 12px; margin-inline-start: 6px; } .c2c-copy-sm:hover, .c2c-copy-sm.is-copied { background: var(--ink); color: #fff; } .c2c-sheba { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; } .c2c-errors { margin: 0 0 14px; padding: 12px 16px; list-style: none; background: var(--red-tint); border-radius: var(--r-ctl); color: var(--red-dark); font-size: 14px; } .c2c-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .c2c-field { margin: 0 0 14px; } .c2c-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } .c2c-field .required { color: var(--red); } .c2c-field-wide { grid-column: 1 / -1; margin: 0 0 14px; } .c2c-field input[type="file"] { width: 100%; padding: 10px; border: 1.5px dashed var(--line); border-radius: var(--r-ctl); background: var(--bg); font-size: 13px; } .c2c-submit { width: 100%; min-height: 52px; } .c2c-help { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); } .c2c-done { display: flex; gap: 14px; align-items: flex-start; } .c2c-done > .cm-icon { flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--green-tint); color: var(--green); } .c2c-done h2 { font-size: 19px; margin: 6px 0 4px; } .c2c-done p { margin: 0; color: var(--ink-2); } .c2c-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0 0; } .c2c-summary div { background: var(--bg); border-radius: var(--r-ctl); padding: 8px 12px; } .c2c-summary dt { font-size: 12px; color: var(--muted); } .c2c-summary dd { margin: 0; font-weight: 800; } .woocommerce-view-order .c2c { margin-bottom: 20px; border: 1px solid var(--line); } /* حساب کاربری */ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > * { flex: 1 1 100%; min-width: 0; } .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { order: 1; flex: 0 0 260px; } .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { order: 2; flex: 1 1 0; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; margin: 0; background: #fff; border-radius: var(--r-card); } .woocommerce-account .woocommerce-MyAccount-navigation { padding: 10px; position: sticky; top: 140px; } .woocommerce-account .woocommerce-MyAccount-content { padding: 24px; font-size: 15px; } .account-user { display: flex; align-items: center; gap: 12px; padding: 10px 10px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .account-avatar { width: 48px; height: 48px; border-radius: 50%; } .account-name { margin: 0; font-weight: 800; } .account-phone { margin: 0; font-size: 13px; color: var(--muted); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); color: var(--ink-2); font-size: 14.5px; font-weight: 500; } .woocommerce-MyAccount-navigation a .cm-icon { color: var(--muted); } .woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--red-tint); color: var(--red); } .woocommerce-MyAccount-navigation .is-active a .cm-icon, .woocommerce-MyAccount-navigation a:hover .cm-icon { color: var(--red); } .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); } .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--bg); color: var(--ink); } .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info { box-shadow: none; background: var(--bg) !important; } .woocommerce-MyAccount-content table.shop_table { font-size: 14px; } .woocommerce-MyAccount-content table.shop_table thead th { background: var(--bg); border-radius: 0; } .woocommerce-MyAccount-content table.shop_table .button { min-height: 36px; padding: 4px 14px; font-size: 13px; margin: 2px; } .woocommerce-orders-table__cell-order-status { font-weight: 700; } .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none !important; } .woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 16px; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .woocommerce-Address-title h2 { font-size: 16px; margin: 0; } .woocommerce-Address address { font-style: normal; line-height: 2; color: var(--ink-2); margin-top: 8px; } .woocommerce-account .woocommerce form .form-row { max-width: 640px; } .woocommerce-account fieldset { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 16px; margin: 20px 0; } .woocommerce-account fieldset legend { padding: 0 8px; font-weight: 800; } .woocommerce-account:not(.logged-in) .wc-content .woocommerce { display: block; max-width: 960px; margin: 0 auto; } .woocommerce-account #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { display: none; } .woocommerce-account #customer_login > div { width: auto !important; float: none !important; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { background: #fff; border: 0 !important; border-radius: var(--r-card); padding: 24px !important; margin: 0 0 20px !important; } .woocommerce form.login .button, .woocommerce form.register .button { width: 100%; } .woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: 6px; margin-bottom: 12px !important; } /* ---------- فوتر ---------- */ .site-footer { position: relative; margin-top: 48px; background: var(--ink); color: #C9CDD2; font-size: 14px; } .film-edge { --hole: rgba(255, 255, 255, .14); position: absolute; top: 12px; right: 0; left: 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; padding-top: 52px; padding-bottom: 36px; } .footer-brand .site-logo { margin-bottom: 16px; } .footer-brand p { line-height: 2; max-width: 38ch; } .footer-title { color: #fff; font-size: 15px; margin: 0 0 14px; } .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links a { display: inline-block; padding: 4px 0; color: #C9CDD2; } .footer-links a:hover, .footer-contact a:hover { color: #fff; } .footer-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.9; } .footer-contact .cm-icon { margin-top: 4px; color: var(--amber); } .footer-contact a { color: #C9CDD2; direction: ltr; unicode-bidi: isolate; } .insta-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; direction: ltr; } .insta-link:hover { background: var(--red); color: #fff; } .trust-seal { margin-top: 16px; display: inline-block; background: #fff; border-radius: var(--r-ctl); padding: 6px; } .trust-seal img { width: 90px; height: auto; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #8E949B; } .footer-bottom .container { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 16px; padding-bottom: 16px; text-align: center; } .footer-bottom p { margin: 0; padding: 0; } .footer-credit { font-size: 12.5px; color: #7C828A; } .footer-credit a { color: #C9CDD2; font-weight: 700; } .footer-credit a:hover { color: #fff; } @media (max-width: 991px) { .footer-bottom .container { padding-bottom: 20px; } } .site-footer :focus-visible { outline-color: var(--amber); } .bottom-nav { display: none; } /* ---------- موجودی کم ---------- */ .p-low { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--red); } .p-low .cm-icon { fill: currentColor; } .pd-buy .p-low { margin: 10px 0 0; font-size: 14px; } /* ---------- افزودن به سبد (حالت بارگذاری) ---------- */ .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; } .single_add_to_cart_button.added { background: var(--green) !important; border-color: var(--green) !important; } /* ---------- خبرم کن ---------- */ .notify-form { margin: 8px 0 12px; } .notify-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .notify-title .cm-icon { color: var(--amber); fill: var(--amber); } .notify-row { display: flex; gap: 8px; } .notify-row input[type="tel"] { flex: 1; min-width: 0; min-height: 46px; } .notify-row .btn { flex-shrink: 0; min-height: 46px; } .notify-hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; } .notify-msg { margin: 8px 0 0; font-size: 13px; } .notify-msg:empty { display: none; } .notify-msg.is-ok { color: var(--green); font-weight: 700; } .notify-msg.is-err { color: var(--red); } .notify-form.is-loading { opacity: .6; pointer-events: none; } .pd-call { width: 100%; font-size: 14px; } /* ---------- بازدیدهای اخیر ---------- */ .recent-clear { border: 0; background: none; padding: 4px 8px; font-size: 13px; font-weight: 700; color: var(--muted); border-radius: 6px; } .recent-clear:hover { color: var(--red); background: var(--red-tint); } .pd ~ .recent-section, .single-product .recent-section { margin-top: 28px; } /* ---------- نظر مشتری‌ها ---------- */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .testi { position: relative; margin: 0; padding: 22px 22px 18px; background: #fff; border-radius: var(--r-card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .testi::before { content: "«"; position: absolute; top: 4px; left: 16px; font-size: 64px; line-height: 1; color: var(--red-tint); font-weight: 800; } .testi blockquote { position: relative; margin: 0; font-size: 15px; line-height: 2; color: var(--ink-2); } .testi figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; } .testi figcaption b { display: block; font-size: 14px; } .testi figcaption small { display: block; font-size: 12.5px; color: var(--muted); } .testi-avatar { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; } /* ---------- فروشگاه حضوری با عکس ---------- */ .visit-card.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: center; } .visit-card .visit-actions { margin-top: 16px; } .visit-photo { margin: 0; border-radius: var(--r-ctl); overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg); } .visit-photo img { width: 100%; height: 100%; object-fit: cover; } .footer-contact a.footer-map { direction: rtl; unicode-bidi: normal; } /* ---------- دکمه‌ی شناور مشاوره ---------- */ .fab { position: fixed; left: 20px; bottom: 24px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .fab-btn { position: relative; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(178, 44, 32, .35); transition: transform .2s var(--ease), background-color .2s; } .fab-btn:hover { background: var(--red-dark); transform: scale(1.05); } .fab-btn > span { grid-area: 1 / 1; display: grid; transition: opacity .2s, transform .2s var(--ease); } .fab-close { opacity: 0; transform: rotate(-90deg); } .fab.is-open .fab-open { opacity: 0; transform: rotate(90deg); } .fab.is-open .fab-close { opacity: 1; transform: none; } .fab:not(.is-open) .fab-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: cm-ring 2.4s ease-out 3; } @keyframes cm-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } } .fab-menu { width: 270px; padding: 14px; background: #fff; border-radius: var(--r-card); box-shadow: 0 18px 44px rgba(30, 33, 36, .18); transform-origin: bottom left; animation: cm-pop .2s var(--ease); } @keyframes cm-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } } .fab-head { margin: 0 0 10px; font-weight: 800; font-size: 14.5px; } .fab-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-ctl); color: var(--ink); } .fab-item + .fab-item { margin-top: 4px; } .fab-item:hover { background: var(--bg); color: var(--ink); } .fab-item.is-primary { background: var(--red-tint); } .fab-item.is-primary:hover { background: #F7DCD8; } .fab-item.is-primary > .cm-icon { background: var(--red); color: #fff; } .fab-item > .cm-icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--red-tint); color: var(--red); } .fab-item span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); line-height: 1.6; } .fab-item b { color: var(--ink); font-size: 14px; } .fab-hours { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } /* ---------- پیگیری سفارش ---------- */ .track-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; } .track-form { background: #fff; border-radius: var(--r-card); padding: 22px; position: sticky; top: 140px; } .track-form .btn { width: 100%; margin-bottom: 6px; } .track-help { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .track-empty, .track-error { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; background: #fff; border-radius: var(--r-card); color: var(--muted); } .track-error { color: var(--red-dark); background: var(--red-tint); } .track-error p, .track-empty p { margin: 0; max-width: 46ch; } .track-card { background: #fff; border-radius: var(--r-card); padding: 24px; } .woocommerce-view-order .track-card { border: 1px solid var(--line); margin-bottom: 20px; } .track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .track-kicker { margin: 0; font-size: 13px; color: var(--muted); } .track-title { margin: 4px 0 0; font-size: 20px; } .track-title.tone-ok { color: var(--green); } .track-title.tone-warn { color: #B36B00; } .track-title.tone-bad { color: var(--red); } .track-total { margin: 0; font-size: 13px; color: var(--muted); text-align: left; } .track-total b { display: block; font-size: 18px; color: var(--ink); } .track-steps { list-style: none; margin: 26px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); } .track-steps li + li::before { content: ""; position: absolute; top: 15px; right: calc(-50% + 18px); left: calc(50% + 18px); height: 3px; border-radius: 3px; background: var(--line); } .track-steps li.is-done + li::before, .track-steps li.is-done + li.is-current::before { background: var(--green); } .track-dot { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 13px; } .track-steps .is-done .track-dot { background: var(--green); border-color: var(--green); color: #fff; } .track-steps .is-current .track-dot { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 4px var(--green-tint); } .track-steps .is-current .track-label { color: var(--ink); font-weight: 700; } .track-steps .is-done .track-label { color: var(--ink-2); } .track-code { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--green-tint); } .track-code > .cm-icon { color: var(--green); } .track-code div { flex: 1; } .track-code p { margin: 0; font-size: 13px; color: var(--ink-2); } .track-code b { font-size: 18px; letter-spacing: .04em; } .track-action { margin: 18px 0 0; } .track-notes { margin-top: 18px; } .track-notes h3 { font-size: 15px; margin-bottom: 8px; } .track-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .track-notes li { padding: 10px 14px; background: var(--bg); border-radius: var(--r-ctl); font-size: 14px; } .track-notes time { display: block; font-size: 12px; color: var(--muted); } .track-notes p { margin: 0; } .track-items { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); } .track-items li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .track-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--bg); } .track-thumb img { width: 100%; height: 100%; object-fit: contain; } .track-name { flex: 1; } .track-name small { color: var(--muted); } .track-price { font-weight: 700; } .track-ship { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .track-hint { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px 18px; background: #fff; border-radius: var(--r-card); font-size: 14.5px; line-height: 2; } .track-hint .cm-icon { flex-shrink: 0; margin-top: 4px; color: var(--red); } /* ---------- درباره‌ی ما ---------- */ .about-facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .about-facts li { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; border-radius: var(--r-card); } .about-facts .cm-icon { color: var(--red); margin-bottom: 6px; } .about-facts b { font-size: 16px; } .about-facts span { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; } .about-body { display: grid; gap: 20px; align-items: start; } .about-body.has-photo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .about-body .entry { max-width: none; margin: 0; } .about-photo { margin: 0; border-radius: var(--r-card); overflow: hidden; position: sticky; top: 140px; } .about-photo img { width: 100%; height: auto; } .about-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding: 24px 28px; background: var(--red); color: #fff; border-radius: var(--r-card); } .about-cta h2 { color: #fff; font-size: 19px; margin: 0 0 4px; } .about-cta p { margin: 0; color: #F6D5D1; } .about-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } .about-cta .btn-primary { background: #fff; color: var(--red); border-color: #fff; } .about-cta .btn-primary:hover { background: var(--red-tint); color: var(--red-dark); border-color: var(--red-tint); } .about-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); } .about-cta .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .about-cta :focus-visible { outline-color: #fff; } /* ---------- تماس با ما ---------- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .contact-card { background: #fff; border-radius: var(--r-card); padding: 24px; } .contact-title { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 16px; } .contact-title .cm-icon { color: var(--red); } .contact-form select { min-height: 48px; } .contact-help { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; } .contact-sent { display: grid; justify-items: center; gap: 6px; padding: 16px 0; text-align: center; } .contact-sent > .cm-icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--green-tint); color: var(--green); } .contact-sent h2 { margin: 6px 0 0; font-size: 20px; } .contact-sent p { margin: 0; color: var(--ink-2); } .contact-code { display: flex; align-items: center; gap: 8px; margin: 8px 0 !important; padding: 8px 18px; border: 1.5px dashed var(--red); border-radius: var(--r-ctl); font-size: 26px; font-weight: 800; color: var(--ink) !important; letter-spacing: .12em; } .contact-sent .btn { margin-top: 8px; } .contact-side { display: grid; gap: 14px; position: sticky; top: 140px; } .contact-info { background: #fff; border-radius: var(--r-card); padding: 20px; } .contact-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .contact-info li > a, .contact-info .ci-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: var(--r-ctl); color: var(--ink); line-height: 1.8; } .contact-info li > a:hover { background: var(--bg); color: var(--ink); } .contact-info .cm-icon { flex-shrink: 0; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--red-tint); color: var(--red); } .contact-info li > a > span, .contact-info .ci-row > span { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 500; min-width: 0; } .contact-info .ci-row { flex-direction: row; } .contact-info small { font-size: 12px; color: var(--muted); font-weight: 400; } .contact-quick { background: #fff; border-radius: var(--r-card); padding: 16px 20px; display: grid; gap: 6px; } .contact-quick p { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); } .contact-quick a { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 0; } .msg-lookup { margin-top: 20px; } .msg-lookup-form { display: flex; gap: 10px; flex-wrap: wrap; } .msg-lookup-form input { flex: 1 1 180px; min-height: 48px; } .msg-lookup-form .btn { flex: 0 0 auto; } .msg-lookup .c2c-errors { margin-top: 14px; } .msg-thread { display: grid; gap: 10px; margin-top: 18px; } .msg-bubble { max-width: 80%; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 2; } .msg-bubble p { margin: 0; } .msg-bubble .msg-meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; } .msg-bubble.is-customer { justify-self: start; background: var(--bg); border-top-right-radius: 4px; } .msg-bubble.is-store { justify-self: end; background: var(--green-tint); border-top-left-radius: 4px; } .msg-wait { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--muted); } /* ---------- شرایط و ضوابط ---------- */ .terms-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; } .terms-toc { position: sticky; top: 140px; background: #fff; border-radius: var(--r-card); padding: 18px; } .terms-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; } .terms-toc li { counter-increment: toc; } .terms-toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.7; } .terms-toc a::before { content: counter(toc, persian); color: var(--red); font-weight: 800; } .terms-toc a:hover { background: var(--red-tint); color: var(--red); } .terms-body { max-width: none; margin: 0; } .terms-body .entry-content > * { max-width: none; } .terms-body .entry-content h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 1.8em 0 .6em; scroll-margin-top: 140px; } .terms-body .entry-content h2:first-child { margin-top: 0; } .terms-num { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--red-tint); color: var(--red); font-size: 14px; } .terms-body .entry-content li { margin-bottom: .4em; } .terms-contact { display: flex; gap: 12px; align-items: flex-start; margin-top: 32px; padding: 16px 18px; border-radius: var(--r-ctl); background: var(--bg); } .terms-contact > .cm-icon { color: var(--red); flex-shrink: 0; } .terms-contact p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); } /* ---------- ورود / ثبت‌نام ---------- */ .woocommerce-account:not(.logged-in) .page-head { display: none; } .auth-wrap { display: flex; justify-content: center; padding: 8px 0 24px; } .auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 28px 28px 22px; box-shadow: 0 10px 40px rgba(30, 33, 36, .06); } .auth-head { text-align: center; margin-bottom: 18px; } .auth-mark { width: 64px; margin: 0 auto 10px; display: block; } .auth-head h2 { font-size: 21px; margin: 0 0 4px; } .auth-head p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.9; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--bg); border-radius: var(--r-ctl); } .auth-tab { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 700; font-size: 14px; } .auth-tab.is-active { background: #fff; color: var(--red); box-shadow: 0 1px 4px rgba(30, 33, 36, .1); } .auth-card .form-row { margin: 0 0 14px !important; padding: 0 !important; } .auth-card label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } .auth-card input.input-text { width: 100%; } .auth-card #otp-mobile, .auth-card .otp-code { text-align: center; font-size: 18px; letter-spacing: .12em; } .auth-submit { width: 100%; min-height: 50px !important; font-size: 16px !important; margin: 0 !important; } .auth-card form.login { background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } .auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .auth-row label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 13.5px; } .auth-lost { font-size: 13px; } .otp-sent-to { margin: 0 0 12px; text-align: center; font-size: 14px; color: var(--ink-2); } .otp-new { margin-bottom: 12px; padding: 12px; background: var(--bg); border-radius: var(--r-ctl); } .otp-new-note { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); } .otp-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .otp-links { display: flex; justify-content: space-between; margin-top: 12px; } .link-btn { border: 0; background: none; padding: 4px 0; color: var(--red); font-size: 13.5px; font-weight: 700; } .link-btn:disabled { color: var(--muted); font-weight: 500; cursor: default; } .otp-msg { margin: 12px 0 0; font-size: 13.5px; text-align: center; } .otp-msg:empty { display: none; } .otp-msg.is-ok { color: var(--green); font-weight: 700; } .otp-msg.is-err { color: var(--red); } [data-otp].is-loading { opacity: .6; pointer-events: none; } .auth-register { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .auth-register summary { cursor: pointer; font-weight: 700; color: var(--red); } .auth-register form { margin-top: 12px !important; padding: 0 !important; border: 0 !important; } .auth-perks { list-style: none; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; } .auth-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .auth-perks .cm-icon { color: var(--red); } /* ساخت حساب در صفحه‌ی پرداخت */ .cm-create-account { margin-top: 6px; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: var(--r-ctl); background: var(--bg); } .cm-ca-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.8; } .cm-ca-label input { margin-top: 6px; accent-color: var(--red); width: 18px; height: 18px; flex-shrink: 0; } .cm-ca-perks { list-style: none; margin: 8px 0 0; padding: 0 28px 0 0; display: grid; gap: 4px; } .cm-ca-perks li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); } .cm-ca-perks .cm-icon { color: var(--green); } .cm-create-account:has(input:checked) { border-color: var(--red); background: var(--red-tint); } /* ---------- منوی بازشونده‌ی حساب ---------- */ .acc-dd { position: relative; } .acc-dd-btn { cursor: pointer; background: #fff; font: inherit; } .acc-dd-btn .cm-icon:last-child { transition: transform .2s; color: var(--muted); } .acc-dd.is-open .acc-dd-btn { background: var(--red-tint); border-color: var(--red-tint); color: var(--red); } .acc-dd.is-open .acc-dd-btn .cm-icon:last-child { transform: rotate(180deg); } .acc-dd-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 290px; padding: 8px; background: #fff; border-radius: var(--r-card); box-shadow: 0 16px 44px rgba(30, 33, 36, .16); animation: cm-pop .18s var(--ease); } .acc-dd-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink); } .acc-dd-head span { display: flex; flex-direction: column; line-height: 1.6; } .acc-dd-head small { color: var(--muted); font-size: 12.5px; text-align: right; } .acc-dd-head:hover { color: var(--red); } .acc-dd-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-ctl); color: var(--ink); font-size: 14.5px; font-weight: 500; } .acc-dd-item + .acc-dd-item { border-top: 1px solid var(--bg); } .acc-dd-item:hover { background: var(--bg); color: var(--ink); } .acc-dd-item .cm-icon { color: var(--ink-2); } .acc-dd-item span { flex: 1; } .acc-dd-badge { font-size: 12px; color: var(--green); font-weight: 700; } /* ---------- علاقه‌مندی روی کارت ---------- */ .p-card { position: relative; } .wish-btn { display: grid; place-items: center; border: 0; cursor: pointer; transition: color .15s, transform .15s, background-color .15s; } .p-wish { position: absolute; top: 10px; left: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--muted); box-shadow: 0 2px 8px rgba(30, 33, 36, .1); } .p-wish:hover { color: var(--red); transform: scale(1.08); } .wish-btn.is-on { color: var(--red); } .wish-btn.is-on .cm-icon path { fill: currentColor; } .wish-btn.is-busy { opacity: .5; } .rail-film .p-wish { top: 10px; } /* ---------- نوار ابزار کنار گالری ---------- */ .pd-gallery { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; } .pd-gallery-main { position: relative; min-width: 0; } .pd-actions { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 140px; } .pd-act { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-2); cursor: pointer; } .pd-act:hover { background: var(--bg); color: var(--ink); } .pd-act.is-on { color: var(--red); background: var(--red-tint); } /* ---------- پنجره‌ی نمودار قیمت ---------- */ .pchart-modal { width: min(760px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); direction: rtl; color: var(--ink); font-family: var(--font); } .pchart-modal::backdrop { background: rgba(30, 33, 36, .55); } .pchart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); } .pchart-head h2 { font-size: 18px; margin: 0; } .pchart-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); } .pchart-body { position: relative; padding: 12px 16px 0; } .pchart { width: 100%; height: auto; display: block; touch-action: pan-y; font-family: var(--font); direction: ltr; } .pchart text { unicode-bidi: plaintext; } .pc-grid { stroke: var(--line); stroke-width: 1; } .pc-ylab, .pc-xlab { font-size: 11px; fill: var(--muted); } .pc-dash { fill: none; stroke: #C5C9CE; stroke-width: 2.5; stroke-dasharray: 7 6; } .pc-line { stroke: #12A5C4; stroke-width: 3; stroke-linecap: round; } .pc-out { stroke: #D5D8DC; stroke-width: 3; stroke-linecap: round; } .pc-cursor { stroke: var(--bg); stroke-width: 18; } .pc-dot { fill: #12A5C4; stroke: #fff; stroke-width: 3; } .pc-dot.is-out { fill: #C5C9CE; } .pc-hit { fill: transparent; cursor: crosshair; } .pchart-tip { position: absolute; top: 18px; transform: translateX(-50%); min-width: 170px; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(30, 33, 36, .16); pointer-events: none; font-size: 13px; } .pchart-tip p { margin: 0; } .pt-date { color: var(--muted); font-size: 12px; } .pt-price { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 6px; } .pt-price small { font-size: 11px; font-weight: 500; } .pt-off { background: var(--red); color: #fff; font-size: 12px; padding: 0 8px; border-radius: var(--r-pill); } .pt-reg { color: var(--muted); text-decoration: line-through; font-size: 12.5px; } .pt-outtxt { color: var(--muted); font-weight: 700; } .pchart-legend { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 6px 16px 4px; font-size: 13px; color: var(--ink-2); } .pchart-legend i { display: inline-block; width: 22px; height: 4px; border-radius: 3px; vertical-align: middle; margin-inline-end: 4px; } .lg-line { background: #12A5C4; } .lg-out { background: #D5D8DC; } .lg-dash { background: repeating-linear-gradient(90deg, #C5C9CE 0 5px, transparent 5px 9px); } .pchart-note { margin: 0; padding: 4px 16px 16px; text-align: center; font-size: 12px; color: var(--muted); } /* ---------- مقایسه ---------- */ .cmp-bar { position: fixed; bottom: 24px; left: 50%; z-index: 84; display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); font-size: 14px; transform: translate(-50%, 0); animation: cm-rise .25s var(--ease); } @keyframes cm-rise { from { opacity: 0; transform: translate(-50%, 16px); } } .cmp-bar-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); color: #fff; } .cmp-bar-link:hover { background: var(--red); color: #fff; } .cmp-thumbs { display: inline-flex; } .cmp-thumbs img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #fff; border: 2px solid var(--ink); margin-inline-start: -8px; } .cmp-thumbs img:first-child { margin-inline-start: 0; } .cmp-bar-clear { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; } .cmp-bar-clear:hover { background: var(--red); } .cmp-scroll { overflow-x: auto; background: #fff; border-radius: var(--r-card); } .cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; } .cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; font-size: 14px; } .cmp-table tbody th { width: 150px; text-align: right; color: var(--muted); font-weight: 500; background: var(--bg); } .cmp-table thead th { position: relative; vertical-align: bottom; } .cmp-prod { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; } .cmp-prod img { width: 120px; height: 120px; object-fit: contain; } .cmp-remove { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 18px; cursor: pointer; } .cmp-remove:hover { background: var(--red-tint); color: var(--red); } .cmp-price { font-weight: 800; } .cmp-price del { display: block; font-weight: 400; color: var(--muted); font-size: 12px; } .cmp-price ins { text-decoration: none; } .cmp-loading { text-align: center; color: var(--muted); padding: 40px; } /* ---------- پیام کوتاه ---------- */ .cm-toast { position: fixed; bottom: 90px; left: 50%; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 14px; transition: opacity .2s, transform .2s var(--ease); } .cm-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------- پیشخوان حساب ---------- */ .dash-hello { font-size: 16px; margin: 0 0 16px; } .dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .dash-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); transition: border-color .2s, box-shadow .2s; } .dash-card:hover { border-color: var(--red); color: var(--ink); box-shadow: 0 6px 18px rgba(30, 33, 36, .06); } .dash-card .cm-icon { color: var(--red); margin-bottom: 4px; } .dash-card b { font-size: 18px; font-weight: 800; } .dash-card span { font-size: 13px; color: var(--muted); } .dash-card.is-wallet { background: var(--ink); color: #fff; border-color: var(--ink); } .dash-card.is-wallet .cm-icon { color: var(--amber); } .dash-card.is-wallet span { color: #C9CDD2; } .dash-title { font-size: 16px; margin: 24px 0 10px; } .dash-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .dash-orders a { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); font-size: 14px; } .dash-orders a:hover { border-color: var(--red); color: var(--ink); } .do-date { color: var(--muted); font-size: 13px; } .do-status { justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg); font-size: 12.5px; font-weight: 700; } .do-status.status-completed { background: var(--green-tint); color: var(--green); } .do-status.status-processing { background: #E6F4FA; color: #0B7A93; } .do-status.status-on-hold, .do-status.status-pending { background: var(--amber-tint); color: #8A5A00; } .do-status.status-cancelled, .do-status.status-failed { background: var(--red-tint); color: var(--red); } .do-total { text-align: left; font-weight: 800; } .invoice-cta { margin: 0 0 16px; } /* ---------- کیف پول ---------- */ .wallet-card { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-radius: 16px; background: var(--ink); color: #fff; } .wallet-card::before { content: ""; position: absolute; top: 10px; right: 16px; left: 16px; height: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 22px); } .wallet-label { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; color: #C9CDD2; font-size: 14px; } .wallet-label .cm-icon { color: var(--amber); } .wallet-balance { margin: 0; font-size: 28px; font-weight: 800; } .wallet-balance .woocommerce-Price-currencySymbol { font-size: 15px; font-weight: 500; } .wallet-mark { width: 70px; opacity: .9; } .wallet-topup, .wallet-history { margin-top: 22px; } .wallet-topup h3, .wallet-history h3 { font-size: 16px; } .wallet-form { max-width: 460px; } .wallet-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .wallet-quick .chip { border: 1px solid var(--line); background: #fff; cursor: pointer; } .wallet-quick .chip.is-active { border-color: var(--red); } .wallet-help { font-size: 13px; color: var(--muted); margin-top: 8px; } .wallet-tx { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .wallet-tx li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); } .tx-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 18px; } .is-in .tx-icon { background: var(--green-tint); color: var(--green); } .is-out .tx-icon { background: var(--red-tint); color: var(--red); } .tx-text { flex: 1; display: flex; flex-direction: column; font-size: 14px; } .tx-text small { color: var(--muted); font-size: 12px; } .tx-amount { font-weight: 800; } .is-in .tx-amount { color: var(--green); } .wallet-empty { color: var(--muted); } /* کیف پول در صفحه‌ی پرداخت */ .cm-wallet-pay { margin: 0 0 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); } .cm-wallet-pay label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .cm-wallet-pay input { width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; } .cm-wp-text { flex: 1; display: flex; flex-direction: column; line-height: 1.6; } .cm-wp-text small { color: var(--ink-2); font-size: 12.5px; } .cm-wallet-pay > label > .cm-icon { color: var(--red); } .cm-wallet-pay.is-on { border-color: var(--red); background: var(--red-tint); } .cm-wallet-pay.is-empty { opacity: .75; } .cm-wallet-pay.is-empty label { cursor: default; } .cm-wp-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); } /* ---------- دفترچه‌ی آدرس ---------- */ .addr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .addr-head p { margin: 0; color: var(--ink-2); font-size: 14px; } .addr-form { margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); } .addr-form h3 { margin: 0 0 8px; font-size: 16px; } .addr-form select { min-height: 48px; } .addr-actions { display: flex; gap: 8px; } .addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .addr-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-card); } .addr-card.is-default { border-color: var(--red); } .addr-card header { display: flex; justify-content: space-between; align-items: center; } .addr-card h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; } .addr-card h4 .cm-icon { color: var(--red); } .addr-badge { padding: 0 10px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 12px; font-weight: 700; } .addr-line { margin: 0; line-height: 1.9; font-size: 14px; } .addr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--muted); } .addr-card footer { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; } .addr-card footer a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .addr-card footer form { margin: 0; } .link-btn.is-danger { color: var(--muted); } .link-btn.is-danger:hover { color: var(--red); } /* انتخاب آدرس در صفحه‌ی پرداخت */ .addr-pick { margin-bottom: 18px; } .addr-pick-title { margin: 0 0 8px; font-weight: 700; font-size: 14px; } .addr-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .addr-opt { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; } .addr-opt input { margin-top: 6px; accent-color: var(--red); } .addr-opt span { display: flex; flex-direction: column; line-height: 1.7; } .addr-opt small { color: var(--muted); font-size: 12.5px; } .addr-opt.is-on { border-color: var(--red); background: var(--red-tint); } .auth-tabs.has-3 { grid-template-columns: repeat(3, 1fr); } /* ---------- تاریخچه‌ی سفارش‌ها ---------- */ .orders-tabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .orders-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 3px solid transparent; color: var(--ink-2); font-weight: 700; white-space: nowrap; } .orders-tabs a.is-active { color: var(--red); border-bottom-color: var(--red); } .ot-count { min-width: 22px; padding: 0 6px; border-radius: 6px; background: var(--muted); color: #fff; font-size: 12px; text-align: center; line-height: 1.7; } .orders-tabs a.is-active .ot-count { background: var(--red); } .orders-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; color: var(--muted); text-align: center; } .orders-empty p { margin: 0; } .order-card { border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 14px; overflow: hidden; } .oc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; color: var(--ink); } .oc-head:hover { background: var(--bg); color: var(--ink); } .oc-head > .cm-icon { color: var(--muted); flex-shrink: 0; } .oc-status { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 800; font-size: 15px; } .oc-dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; } .tone-ok .oc-dot { background: var(--green); } .tone-bad .oc-dot { background: var(--red); } .tone-wait .oc-dot { background: var(--amber); } .oc-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font-size: 13px; color: var(--muted); } .oc-meta span + span::before { content: "•"; margin: 0 10px; color: #C5C9CE; } .oc-meta b { color: var(--ink); font-weight: 800; margin-inline-start: 4px; } .oc-items { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); } .oc-thumb, .od-thumb { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--bg); overflow: hidden; } .oc-thumb img, .od-thumb img { width: 100%; height: 100%; object-fit: contain; } .oc-thumb b, .od-thumb b { position: absolute; bottom: 2px; left: 2px; min-width: 20px; padding: 0 5px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; text-align: center; } .oc-actions { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); } .oc-act { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #1872D6; } .oc-act:hover { color: var(--red); } .oc-act-cancel { color: var(--muted); } /* ---------- جزئیات سفارش ---------- */ .od { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .od-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .od-head h2 { flex: 1; margin: 0; font-size: 18px; } .od-back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); } .od-back:hover { background: var(--bg); color: var(--ink); } .od-invoice { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #1872D6; font-size: 14px; } .od-sec { padding: 14px 18px; border-bottom: 1px solid var(--line); } .od-row { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 6px; font-size: 14px; color: var(--muted); line-height: 2; } .od-row:last-child { margin-bottom: 0; } .od-row > span + span::before { content: "•"; margin: 0 12px; color: #C5C9CE; } .od-row b { color: var(--ink); font-weight: 700; margin-inline-start: 6px; } .od .c2c { margin: 14px 18px; border: 1px solid var(--line); } .od-ship { margin: 14px 18px 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); } .od-ship-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .od-ship-title { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 800; } .od-ship-title .cm-icon { color: var(--red); } .od-progress { flex: 0 1 320px; } .od-progress p { margin: 0 0 6px; font-weight: 800; font-size: 14px; } .od-progress.tone-ok p { color: var(--green); } .od-progress.tone-warn p { color: #B36B00; } .od-progress.tone-bad p { color: var(--red); } .od-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; } .od-bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); } .tone-warn .od-bar i { background: var(--amber); } .od-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); } .od-track { margin-top: 10px !important; align-items: center; gap: 10px !important; padding: 10px 12px; background: var(--green-tint); border-radius: var(--r-ctl); } .od-items { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); } .od-items li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .od-items li:last-child { border-bottom: 0; padding-bottom: 0; } .od-thumb { width: 80px; height: 80px; } .od-item-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .od-item-text > a, .od-item-text > span { font-weight: 700; color: var(--ink); } .od-item-text small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); } .od-item-price { font-weight: 800; white-space: nowrap; } .od-notes h3 { font-size: 15px; } .od-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .od-notes li { padding: 10px 14px; background: var(--bg); border-radius: var(--r-ctl); font-size: 14px; } .od-notes time { display: block; font-size: 12px; color: var(--muted); } .od-notes p { margin: 0; } .od-help { margin: 0; padding: 14px 18px; font-size: 13.5px; color: var(--muted); } /* ---------- اطلاعات فردی ---------- */ .pi-sec { margin: 0 0 18px; padding: 0; border: 0; } .pi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .pi-head h3 { margin: 0; font-size: 16px; } .pi-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .pi-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .pi-grid > div:nth-child(odd) { border-inline-end: 1px solid var(--line); } .pi-grid > div:nth-last-child(-n+2):nth-child(odd), .pi-grid > div:last-child { border-bottom: 0; } .pi-grid span { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; } .pi-grid span small { font-weight: 400; color: var(--muted); font-size: 12px; } .pi-grid b { font-weight: 400; color: var(--ink-2); text-align: right; } .pi-empty { color: #A3A8AE; font-size: 13px; } .pi-badge { font-style: normal; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; } .pi-badge.is-ok { background: var(--green-tint); color: var(--green); } .pi-hint { margin: 0; font-size: 13px; color: var(--muted); } .pi-form fieldset { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); } .pi-form legend { padding: 0 8px; font-weight: 800; } .pi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .pi-fields .form-row { margin: 0 0 12px !important; width: auto !important; } .pi-fields .pi-wide { grid-column: 1 / -1; margin-bottom: 10px; } .pi-fields input:disabled { background: var(--bg); color: var(--muted); } .pi-actions { display: flex; gap: 8px; } .woocommerce-MyAccount-content .recent-section { margin-top: 28px; } .woocommerce-MyAccount-content .recent-section ul.products.rail { grid-auto-columns: minmax(170px, 190px); } /* ---------- مشخصات فنی گروه‌بندی‌شده ---------- */ .specs { display: grid; gap: 8px; } .spec-group { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .spec-group:last-child { border-bottom: 0; } .spec-title { margin: 0; padding-top: 12px; font-size: 16px; font-weight: 800; color: var(--ink); } .spec-rows { margin: 0; } .spec-row { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bg); font-size: 14.5px; line-height: 1.9; } .spec-row:last-child { border-bottom: 0; } .spec-row dt { color: var(--muted); } .spec-row dd { margin: 0; color: var(--ink); word-break: break-word; } /* ---------- ورود: لینک فراموشی رمز کنار برچسب ---------- */ .auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; } .auth-label-row label { margin: 0 !important; } .auth-lost { font-size: 13px; font-weight: 700; } .auth-back { margin: 16px 0 0; text-align: center; font-size: 14px; } .auth-help { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--muted); } [data-reset].is-loading .rs-step, [data-reset].is-loading .auth-submit { opacity: .6; pointer-events: none; } /* ساخت حساب در پرداخت: رمز */ .cm-ca-pass { margin: 10px 0 4px; padding-inline-start: 28px; } .cm-ca-pass label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } .cm-ca-pass input { max-width: 320px; } .cm-ca-pass small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); } /* ---------- تصویر پروفایل محلی ---------- */ .cm-avatar { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--red-tint); color: var(--red); } .account-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--red-tint); color: var(--red); flex-shrink: 0; } /* ---------- وضعیت تأیید ---------- */ .pi-grid span { flex-wrap: wrap; } button.pi-badge { border: 0; cursor: pointer; font-family: inherit; } .pi-badge.is-warn { background: var(--amber-tint); color: #8A5A00; } button.pi-badge.is-warn:hover { background: var(--amber); color: #fff; } .vf-modal { width: min(400px, 92vw); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); direction: rtl; font-family: var(--font); color: var(--ink); } .vf-modal::backdrop { background: rgba(30, 33, 36, .55); } .vf-body { position: relative; display: grid; justify-items: center; gap: 10px; padding: 28px 24px 22px; text-align: center; } .vf-body > .cm-icon { color: var(--green); } .vf-body h3 { margin: 0; font-size: 18px; } .vf-to { margin: 0; color: var(--ink-2); font-size: 14px; } .vf-close { position: absolute; top: 10px; left: 10px; } .vf-code { display: grid; gap: 8px; width: 100%; } .vf-code input { text-align: center; font-size: 20px; letter-spacing: .2em; } .vf-send, .vf-check { width: 100%; } .vf-modal.is-loading .vf-body { opacity: .6; pointer-events: none; } /* ========================================================= واکنش‌گرا ========================================================= */ @media (max-width: 1100px) { .header-phone { display: none; } .blog-layout { grid-template-columns: minmax(0, 1fr) 260px; } .blog-main .post-card.is-featured { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pd-buy { grid-column: 1 / -1; position: static; } .footer-grid { grid-template-columns: 1fr 1fr; } .checkout-grid { grid-template-columns: minmax(0, 1fr) 360px; } } @media (max-width: 991px) { :root { --header-h: 60px; --gutter: 16px; } html { scroll-padding-top: 120px; } body { padding-bottom: 64px; } /* هدر موبایل: منو | لوگو (وسط) | سبد، و جستجو در ردیف دوم */ .header-main { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; height: auto; gap: 6px 8px; padding-top: 8px; padding-bottom: 10px; } .header-main > .menu-toggle { grid-column: 1; grid-row: 1; } .header-main > .site-branding { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; } .header-main > .header-actions { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; } .header-main > .header-search { grid-column: 1 / -1; grid-row: 2; } .header-actions .acc-dd, .header-actions .header-phone, .header-actions .header-account { display: none; } .menu-toggle { display: inline-grid; } .site-branding { flex: none; } .site-branding .custom-logo { height: 36px; } .header-main .logo-mark { width: 46px; } .header-main .logo-name { font-size: 18px; } .header-main .logo-latin { font-size: 10px; } .header-search { order: 5; flex-basis: 100%; max-width: none; } .header-search .search-input { height: 42px; } .header-search .search-icon { height: 42px; } .header-account { display: none; } .site-header.is-compact .header-main { padding-bottom: 8px; } /* منوی کشویی */ .main-nav { position: fixed; top: 0; bottom: 0; right: 0; z-index: 200; width: min(340px, 88vw); max-height: none; display: flex; flex-direction: column; background: #fff; border: 0; opacity: 1; transform: translateX(102%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; } .site-header { margin-bottom: 0; } .is-nav-open .main-nav { transform: none; visibility: visible; transition: transform .3s var(--ease); box-shadow: 0 0 0 100vmax rgba(30, 33, 36, .5); } .is-nav-open .site-header { z-index: 210; } .admin-bar .main-nav { top: 46px; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } .drawer-head .logo-mark { width: 42px; } .drawer-head .logo-name { font-size: 17px; } .drawer-head .custom-logo { height: 32px; width: auto; } .nav-inner { flex: 1; overflow: auto; display: block; padding: 8px 0; } .nav-all { display: none; } .primary-menu { display: block; } .primary-menu li { position: relative; } .primary-menu a, .primary-menu > li > a { display: block; height: auto; padding: 12px 20px; padding-left: 56px; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--bg); } .primary-menu > li > a::after { display: none; } .primary-menu .sub-menu { display: none; background: var(--bg); } .primary-menu .sub-menu a { padding-right: 32px; font-size: 14px; color: var(--ink-2); border-bottom-color: #fff; } .primary-menu .sub-menu .sub-menu a { padding-right: 44px; } .primary-menu .sub-menu .sub-menu .sub-menu a { padding-right: 56px; font-size: 13px; } .primary-menu li.is-open > .sub-menu { display: block; } .submenu-toggle { position: absolute; top: 4px; left: 8px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); } .submenu-toggle::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); transition: transform .2s; } .submenu-toggle[aria-expanded="true"]::before { transform: rotate(135deg); } .drawer-foot { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--line); } .drawer-foot a { display: flex; align-items: center; gap: 8px; padding: 8px 4px; color: var(--ink); font-weight: 500; } /* نوار پایین موبایل */ .bottom-nav { position: fixed; bottom: 0; right: 0; left: 0; z-index: 90; height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; font-size: 11.5px; font-weight: 500; color: var(--ink-2); } .bottom-nav [aria-current="page"] { color: var(--red); } .bn-icon { position: relative; display: block; } .bottom-nav .cart-count { top: -6px; left: -10px; } /* فروشگاه */ .shop-layout { grid-template-columns: minmax(0, 1fr); } .filters-open { display: inline-flex; } .shop-filters { position: fixed; top: auto; bottom: 0; right: 0; left: 0; z-index: 200; max-height: 82vh; padding: 16px; background: var(--bg); border-radius: 18px 18px 0 0; transform: translateY(102%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; } .is-filters-open .shop-filters { transform: none; visibility: visible; transition: transform .3s var(--ease); } .filters-close { display: inline-grid; } .sort-chips { order: 3; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; } .sort-chips::-webkit-scrollbar { display: none; } .sort-chips .chip { flex-shrink: 0; } .shop-toolbar { padding: 10px 12px; } .sort-label { display: none; } .chip { white-space: nowrap; } .woocommerce ul.products, ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .woocommerce ul.products.rail, ul.products.rail { grid-auto-columns: minmax(160px, 178px); } .rail-arrow { display: none; } .perks { grid-template-columns: 1fr 1fr; } .perk:nth-child(3) { border-inline-start: 0; } .perk:nth-child(n+3) { border-top: 1px solid var(--line); } /* محصول */ .pd-top { grid-template-columns: 1fr; padding: 16px; gap: 18px; } .pd-buy { position: static; } .pd > .woocommerce-tabs { padding: 4px 16px 16px; } .sticky-buy { position: fixed; bottom: 64px; right: 0; left: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(30, 33, 36, .06); transform: translateY(120%); transition: transform .25s var(--ease); } .sticky-buy.is-visible { transform: none; } .sticky-buy-price { font-weight: 800; font-size: 16px; display: flex; flex-direction: column; line-height: 1.4; } .sticky-buy-price del { font-size: 12px; color: var(--muted); font-weight: 400; } .sticky-buy-price ins { text-decoration: none; } /* سبد و پرداخت */ .woocommerce-cart .woocommerce, .checkout-grid { grid-template-columns: 1fr; } .checkout-side, .woocommerce .cart-collaterals .cart_totals { position: static; } .woocommerce #reviews { grid-template-columns: 1fr; } .blog-layout, .faq-layout, .track-layout, .contact-layout, .terms-layout { grid-template-columns: 1fr; } .terms-toc { position: static; } .contact-side, .about-photo { position: static; } .about-facts { grid-template-columns: 1fr 1fr; } .about-body.has-photo { grid-template-columns: 1fr; } .track-form { position: static; } .visit-card.has-photo { grid-template-columns: 1fr; } .visit-photo { order: -1; } .fab { left: 14px; bottom: 80px; } .acc-dd-menu { position: fixed; top: auto; bottom: 70px; left: 12px; right: 12px; width: auto; } .fab-btn { width: 50px; height: 50px; } .single-product .fab { bottom: 148px; } .faq-contact { position: static; } .blog-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .woocommerce #review_form_wrapper { position: static; } .home-posts, .related-posts .post-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .home-posts > *, .related-posts .post-grid > * { scroll-snap-align: start; } .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { flex: 1 1 100%; position: static; } .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; } .woocommerce-MyAccount-navigation a { white-space: nowrap; padding: 8px 12px; } .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding: 0; border: 0; } .woocommerce-account .woocommerce-MyAccount-content { padding: 16px; } .woocommerce-account #customer_login { grid-template-columns: 1fr; } } @media (max-width: 700px) { .slider { border-radius: 12px; } .slider.mobile-art { aspect-ratio: 4 / 3; } .slider-arrow { display: none; } .hero { padding-inline: var(--gutter); } .cat-rail { justify-content: flex-start; padding: 14px 8px; } .cat-rail a { width: 78px; } .cat-img { width: 66px; height: 66px; } .cat-name { font-size: 12px; } .film-band { padding: 34px 12px 34px; border-radius: 14px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; } .film-band::before, .film-band::after { right: 8px; left: 8px; height: 7px; background: repeating-linear-gradient(90deg, var(--hole) 0 14px, transparent 14px 26px); } .film-band::before { top: 11px; } .film-band::after { bottom: 11px; } .film-band-head h2 { font-size: 18px; } .section-head h2 { font-size: 17px; } .p-body { padding: 0 10px 10px; } .p-thumb { padding: 8px; } .p-title { font-size: 13px; } .p-price { font-size: 15px; } .perks { grid-template-columns: 1fr; } .perk + .perk { border-inline-start: 0; border-top: 1px solid var(--line); } .visit-card { padding: 20px; } .visit-actions, .visit-actions .btn { width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; } .footer-brand { display: flex; flex-direction: column; align-items: center; } .footer-brand p { margin-inline: auto; } .footer-links a { padding: 6px 0; } .footer-contact ul { justify-items: center; } .footer-contact li { justify-content: center; text-align: center; } .trust-seal { margin-inline: auto; } .page-title { font-size: 21px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } .checkout-card { padding: 18px 16px; } .checkout-steps li { font-size: 12px; } .checkout-steps li + li::before { margin: 0 6px; } .step-dot { width: 24px; height: 24px; } .ph-stats { grid-template-columns: 1fr; } .woocommerce table.cart td.actions .coupon { flex-direction: column; } .woocommerce table.cart td.actions .coupon .input-text { width: 100%; } .post-card.is-featured { grid-template-columns: 1fr; } .contact-card { padding: 18px 16px; } .msg-bubble { max-width: 100%; } .about-facts li { padding: 16px; } .about-cta { padding: 20px; } .track-card { padding: 18px 16px; } .track-steps li { font-size: 11.5px; } .track-total { text-align: right; } .c2c { padding: 18px 16px; } .dash-cards { grid-template-columns: 1fr 1fr; } .spec-group { grid-template-columns: 1fr; gap: 0; } .spec-title { padding: 0 0 4px; } .spec-row { grid-template-columns: 1fr 1.3fr; gap: 10px; } .pi-grid, .pi-fields { grid-template-columns: 1fr; } .pi-grid > div:nth-child(odd) { border-inline-end: 0; } .pi-grid > div { border-bottom: 1px solid var(--line) !important; } .pi-grid > div:last-child { border-bottom: 0 !important; } .od-items li { flex-wrap: wrap; } .od-item-price { width: 100%; text-align: left; } .od-row > span + span::before { display: none; } .od-row { flex-direction: column; } .dash-orders a { grid-template-columns: 1fr 1fr; } .pd-gallery { grid-template-columns: 1fr; } .pd-actions { flex-direction: row; position: static; order: 2; justify-content: center; } .pchart-tip { min-width: 140px; } .cmp-bar { bottom: 80px; } .cmp-table { min-width: 0; } .cmp-table thead th, .cmp-table td { min-width: 150px; padding: 10px; font-size: 13.5px; } .cmp-table tbody th { position: sticky; right: 0; z-index: 1; width: 96px; min-width: 96px; font-size: 12.5px; } .cmp-table thead th:first-child { position: sticky; right: 0; z-index: 2; background: #fff; min-width: 96px; } .cmp-prod img { width: 88px; height: 88px; } .cmp-prod span { font-size: 13px; } .auth-card { padding: 22px 18px 18px; border-radius: 14px; } .c2c-steps > li { padding-inline-start: 0; } .c2c-steps > li::before { position: static; display: inline-grid; margin-bottom: 8px; } .c2c-form { grid-template-columns: 1fr; } .c2c-card { padding: 18px; } .woocommerce ul.order_details { grid-template-columns: 1fr 1fr; } .woocommerce ul.order_details li:nth-child(odd) { border-inline-start: 0 !important; } .woocommerce ul.order_details li:nth-child(n+3) { border-top: 1px solid var(--line) !important; } .blog-grid, .blog-main .blog-grid { grid-template-columns: 1fr; } .blog-hero { padding: 28px 20px; } .blog-hero-mark { display: none; } .post-card.is-featured .post-body { padding: 16px 18px 20px; } .post-card.is-featured .post-title { font-size: 18px; } .comment-form { grid-template-columns: 1fr; } .comment-list .children { padding-inline-start: 12px; } .cm-comment-avatar { width: 36px; height: 36px; } } @media (max-width: 782px) { .admin-bar .site-header { top: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .bottom-nav, .notice-bar, .cart-drawer, .sticky-buy { display: none !important; } body { background: #fff; } } .auth-card #otp-mobile::placeholder, .auth-card .otp-code::placeholder { text-align: center; letter-spacing: normal; } .spam-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--amber-tint); color: #7A4E00; font-size: 13px; line-height: 1.8; text-align: right; } .spam-hint .cm-icon { flex-shrink: 0; margin-top: 3px; } .woocommerce-product-details__short-description .en-title { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; text-align: right; } /* ---------- استعلام قیمت (محصول بدون قیمت) ---------- */ .pd-inquiry { display: grid; justify-items: center; gap: 8px; padding: 18px 16px; margin-bottom: 4px; text-align: center; background: #fff; border: 1.5px dashed #E8B4AE; border-radius: var(--r-card); } .pd-inquiry-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--red-tint); color: var(--red); } .pd-inquiry-title { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--ink); } .pd-inquiry-text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); } .pd-inquiry .btn { width: 100%; } .pd-inquiry-call bdi { font-size: 16px; letter-spacing: .02em; } /* دکمه‌ی کارت محصول: متن و آیکون همیشه وسط */ .p-card .p-foot .button, .woocommerce ul.products li.product .p-foot .button { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; } /* ========================================================= * نسخه‌ی ۲.۱۶ * ======================================================= */ /* ---------- منوی حساب کاربری (سبک کارت کاربر + اعتبار) ---------- */ .acc-nav { padding: 0 !important; overflow: hidden; } .acc-nav-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; } .acc-nav-head .account-avatar { display: grid; place-items: center; flex-shrink: 0; background: var(--bg); color: var(--muted); } .acc-nav-who { min-width: 0; } .acc-nav-who .account-name { display: flex; align-items: center; gap: 6px; } .acc-nav-who .account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-nav-edit { display: inline-grid !important; place-items: center; padding: 4px !important; color: var(--red) !important; background: none !important; } .acc-credit { display: grid; gap: 4px; margin: 0 12px 10px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); } .acc-credit:hover { background: var(--red-tint); color: var(--ink); } .acc-credit-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; } .acc-credit-row b { font-size: 15px; } .acc-credit-link { display: inline-flex; align-items: center; gap: 2px; justify-self: end; font-size: 12.5px; font-weight: 700; color: #1478C8; } .acc-nav ul { padding: 4px 8px 8px !important; border-top: 1px solid var(--line); } .acc-nav li a { position: relative; border-radius: 0; padding: 13px 10px; border-bottom: 1px solid var(--line); } .acc-nav li:last-child a { border-bottom: 0; } .acc-nav .is-active a { background: none; color: var(--ink); font-weight: 800; } .acc-nav .is-active a::before { content: ""; position: absolute; inset-inline-start: -8px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--red); } .acc-nav .is-active a .cm-icon { color: var(--ink); } .acc-nav li a:hover { background: var(--bg); border-radius: var(--r-ctl); } .acc-nav .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 0; margin-top: 0 !important; padding-top: 0; } .acc-nav-badge { margin-inline-start: auto; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; } .acc-intro { color: var(--muted); margin: 0 0 16px; } .recent-empty[hidden] { display: none !important; } /* ---------- اطلاعات حساب کاربری ---------- */ .pf { display: grid; gap: 18px; } .pf-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; } .pf-title { font-size: 17px; margin: 0 0 16px; } .pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; } .pf-box { position: relative; display: grid; gap: 4px; min-height: 84px; padding: 16px 18px 16px 52px; border-bottom: 1px solid var(--line); } .pf-box:nth-child(odd) { border-inline-end: 1px solid var(--line); } .pf-box:nth-last-child(-n+2):nth-child(odd), .pf-box:last-child { border-bottom: 0; } .pf-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .pf-value { font-size: 15.5px; font-weight: 700; color: var(--ink); word-break: break-word; } .pf-empty { color: #B8BDC3; font-weight: 500; } .pf-edit { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; } .pf-edit:hover { background: var(--bg); color: var(--red); } .pf-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .pf-security { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pf-security .pf-title { margin-bottom: 4px; } .pf-security p { margin: 0; font-size: 13.5px; color: var(--muted); } .pf-security-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: var(--r-ctl); background: none; color: #1478C8; font: inherit; font-weight: 700; cursor: pointer; } .pf-security-link:hover { background: #EAF4FD; } .pf-form { justify-items: stretch; text-align: start; } .pf-form h3 { margin: 0 0 4px; padding-inline-end: 36px; font-size: 17px; } .pf-form .form-row { margin: 0 0 10px; } .pf-form label { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 700; } .pf-form .input-text { width: 100%; } .pf-hint { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); } .pf-save { width: 100%; } .vf-body .vf-close { position: absolute; top: 10px; inset-inline-end: 10px; } /* ---------- درخواست‌های پشتیبانی (تیکت) ---------- */ .tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .tk-head p { margin: 0; color: var(--muted); font-size: 14px; } .tk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .tk-list li + li { border-top: 1px solid var(--line); } .tk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "s d st" "e e e"; gap: 4px 14px; align-items: center; padding: 14px 16px; color: var(--ink); } a.tk-row:hover { background: var(--bg); color: var(--ink); } .tk-list li.is-unread .tk-row { background: var(--red-tint); } .tk-subject { grid-area: s; font-weight: 800; display: flex; align-items: center; gap: 8px; } .tk-subject .acc-nav-badge { margin: 0; } .tk-excerpt { grid-area: e; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-date { grid-area: d; font-size: 12.5px; color: var(--muted); } .tk-status { grid-area: st; justify-self: end; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--ink-2); } .tk-status.tone-ok { background: var(--green-tint); color: var(--green); } .tk-status.tone-wait { background: var(--amber-tint); color: #8A5A00; } .tk-status.tone-bad { background: var(--red-tint); color: var(--red); } .tk-view { border: 1px solid var(--line); border-radius: var(--r-card); } .tk-view .tk-meta { margin: 12px 18px 0; font-size: 13px; color: var(--muted); } .tk-view .msg-thread { padding: 0 18px; } .msg-wait { margin: 0; font-size: 13px; color: #8A5A00; } .tk-reply { display: grid; gap: 8px; margin: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .tk-reply label { font-weight: 700; font-size: 14px; } .tk-reply textarea { width: 100%; } .tk-reply .btn { justify-self: start; } .wallet-requests .tk-list { margin-top: 10px; } .contact-sent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } /* ---------- نشان اصالت کالا ---------- */ .auth-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; line-height: 1.6; white-space: nowrap; vertical-align: middle; } .auth-badge.is-original { background: var(--green-tint); color: var(--green); } .auth-badge.is-similar { background: #EEF1F5; color: #3E5570; } .auth-badge.is-sm { padding: 1px 8px; font-size: 11px; } .p-tags { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; margin-bottom: 4px; } .p-colors { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; } .p-colors i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); } .p-colors em { font-style: normal; font-size: 11px; color: var(--muted); margin-inline-start: 2px; } /* ---------- سربرگ صفحه‌ی محصول (برند، دسته، چیپ‌ها) ---------- */ .pd-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; } .pd-head-meta .pd-brand { margin: 0; } .pd-cat { font-size: 13px; color: var(--muted); } .pd-cat::before { content: "/"; margin-inline-end: 10px; color: #C5C9CE; } .pd-head-meta .pd-brand + .pd-cat::before { display: inline; } .pd-head-meta > .pd-cat:first-child::before { display: none; } .pd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 14px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); } .pd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); font-size: 13px; font-weight: 600; } a.pd-chip:hover { background: var(--red-tint); color: var(--red); } .pd-chip.is-rate .cm-icon { color: var(--amber); fill: var(--amber); } .pd-chip.is-sku { margin-inline-start: auto; background: none; color: var(--muted); font-weight: 400; padding-inline: 0; } /* ---------- پرداخت اقساطی ---------- */ .inst-box { display: grid; gap: 8px; margin: 16px 0; } .inst-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--r-ctl); background: #fff; } .inst-logo { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--inst, var(--red)) 12%, #fff); color: var(--inst, var(--red)); overflow: hidden; } .inst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .inst-text { display: grid; line-height: 1.7; } .inst-text b { font-size: 14px; } .inst-text small { font-size: 12.5px; color: var(--muted); } /* ---------- نقاط قوت/ضعف و محتوای جعبه ---------- */ .pc-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 24px; } .pc-col { padding: 16px 18px; border-radius: var(--r-card); border: 1px solid var(--line); } .pc-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; } .pc-col.is-pro h3 { color: var(--green); } .pc-col.is-con h3 { color: var(--red); } .pc-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pc-col li { position: relative; padding-inline-start: 18px; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); } .pc-col li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; } .pc-col.is-pro li::before { background: var(--green); opacity: 1; } .pc-col.is-con li::before { background: var(--red); opacity: 1; } .box-wrap { margin: 28px 0 0; } .box-title { font-size: 18px; margin: 0 0 14px; } .box-grid { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .box-grid li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.7; } .box-grid .cm-icon { flex-shrink: 0; color: var(--green); } /* ---------- افزودنی‌ها ---------- */ .addons { margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; min-width: 0; overflow: hidden; } .addons-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(90deg, var(--red-tint), #fff); border-bottom: 1px solid var(--line); } .addons-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--red); box-shadow: 0 2px 6px rgba(178, 44, 32, .12); } .addons-title { display: grid; line-height: 1.6; flex: 1; min-width: 0; } .addons-title b { font-size: 14.5px; } .addons-title small { font-size: 12px; color: var(--muted); } .addons-count { font-size: 12px; font-weight: 800; color: var(--green); white-space: nowrap; } .addons-list { display: grid; gap: 8px; padding: 12px; } .addon { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 0; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s, box-shadow .15s; } .addon:hover { border-color: #C9CDD2; box-shadow: 0 4px 12px rgba(30, 33, 36, .06); } .addon input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .addon-check { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 2px solid #C5C9CE; border-radius: 7px; color: transparent; background: #fff; transition: all .15s; } .addon input:focus-visible + .addon-check { outline: 2px solid var(--red); outline-offset: 2px; } .addon-name { flex: 1; font-weight: 600; line-height: 1.7; } .addon-price { padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg); font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; } .addon.is-on { border-color: var(--green); background: var(--green-tint); } .addon.is-on .addon-check { border-color: var(--green); background: var(--green); color: #fff; } .addon.is-on .addon-price { background: #fff; color: var(--green); } .addons-total { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 14px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--ink-2); background: var(--bg); } .addons-total b { font-size: 16px; color: var(--ink); } .addons-total[hidden] { display: none; } /* ---------- رنگ‌بندی ساده ---------- */ .pcol { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; } .pcol legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); } .pcol legend b { color: var(--ink); } .pcol-list { display: flex; flex-wrap: wrap; gap: 8px; } .pcol-item { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; cursor: pointer; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; } .pcol-item:hover { border-color: #B9BEC4; } .pcol-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pcol-dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); position: relative; } .pcol-label { display: grid; line-height: 1.5; } .pcol-label small { font-size: 11px; color: var(--muted); } .pcol-item.is-on { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); font-weight: 700; } .pcol-item.is-on .pcol-dot::after { content: ""; position: absolute; inset: 6px 5px 7px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); } .pcol-item.is-out { opacity: .45; cursor: not-allowed; text-decoration: line-through; } .pcol-item.is-out input { cursor: not-allowed; } .pcol-item:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; } .pcol.is-err .pcol-item:not(.is-out) { border-color: #E9A39C; } .pcol-err { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--red); } .pcol-total { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); } .cart-color { display: inline-flex; align-items: center; gap: 6px; } .cart-color i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); } /* ---------- انتخاب رنگ و مدل با دکمه ---------- */ .swatch-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .woocommerce div.product form.cart .variations td.value { position: relative; } .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; } .swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .swatch:hover { border-color: #B9BEC4; } .swatch.is-active { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); font-weight: 700; } .swatch.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; } .swatch i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); flex-shrink: 0; } .woocommerce div.product form.cart .reset_variations { font-size: 13px; } /* ---------- پرسش و پاسخ ---------- */ .qa-ask { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r-card); background: var(--bg); margin-bottom: 20px; } .qa-ask > div { flex: 1 1 240px; } .qa-title { font-size: 17px; margin: 0 0 4px; } .qa-ask p { margin: 0; font-size: 13.5px; color: var(--muted); } .qa-form { flex: 1 1 320px; display: grid; gap: 8px; } .qa-form textarea { width: 100%; background: #fff; } .qa-form .btn { justify-self: start; } .qa-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); } .qa-list { list-style: none; margin: 0; padding: 0; } .qa-item { padding: 16px 0; border-bottom: 1px solid var(--line); } .qa-item:last-child { border-bottom: 0; } .qa-q { display: flex; gap: 10px; align-items: baseline; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.9; } .qa-mark { flex-shrink: 0; padding: 0 8px; border-radius: 6px; background: var(--red-tint); color: var(--red); font-size: 12px; font-weight: 800; line-height: 22px; } .qa-mark.is-answer { background: var(--green-tint); color: var(--green); } .qa-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); } .qa-a { display: flex; gap: 10px; align-items: baseline; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--bg); } .qa-a p { margin: 0; font-size: 14.5px; line-height: 1.9; } .qa-store { display: inline-flex; align-items: center; gap: 4px; color: var(--green); } /* ---------- دیدگاه‌ها و پرسش‌های من ---------- */ .rv-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .rv-list li + li { border-top: 1px solid var(--line); } .rv-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); } .rv-list a:hover { background: var(--bg); color: var(--ink); } .rv-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--bg); } .rv-thumb img { width: 100%; height: 100%; object-fit: contain; } .rv-body { flex: 1; min-width: 0; display: grid; gap: 2px; } .rv-kind { font-size: 12.5px; color: var(--muted); } .rv-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-date { font-size: 12px; color: var(--muted); } /* ---------- برندهای صفحه‌ی اصلی (۸ برند پرمحصول) ---------- */ .brand-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } @media (max-width: 991px) { .brand-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acc-nav { position: static !important; } .acc-nav ul { padding: 8px !important; } .acc-nav li a { border-bottom: 0; border-radius: var(--r-pill); padding: 8px 14px; background: var(--bg); } .acc-nav .is-active a { background: var(--red-tint); color: var(--red); } .acc-nav .is-active a .cm-icon { color: var(--red); } .acc-nav .is-active a::before { display: none; } } @media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } .pf-box:nth-child(odd) { border-inline-end: 0; } .pf-box:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); } .pf-box:last-child { border-bottom: 0; } .tk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s st" "e e" "d d"; } .blog-main .blog-grid > .post-card:not(.is-featured):last-child:nth-child(even) { display: flex; flex-direction: column; } .blog-main .blog-grid > .post-card:not(.is-featured):last-child:nth-child(even) .post-thumb { aspect-ratio: 16 / 10; height: auto; min-height: 0; } .pd-chip.is-sku { margin-inline-start: 0; } .brand-strip a { height: 60px; padding: 8px; } } /* ---------- صفحه‌ی «سفارش ثبت شد» ---------- */ .woocommerce-order-received .wc-content > .woocommerce { max-width: 1080px; } .ty { gap: 18px; } .ty-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 40px 24px 30px; text-align: center; background: #fff; border-radius: 18px; } .ty-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--green), #5CC98C); } .ty-hero.is-failed::before { background: var(--red); } .ty-badge { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 10px var(--green-tint), 0 14px 30px rgba(30, 158, 90, .3); margin-bottom: 16px; animation: ty-pop .5s var(--ease) both; } .ty-hero.is-failed .ty-badge { background: var(--red); box-shadow: 0 0 0 10px var(--red-tint); } @keyframes ty-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ty-kicker { margin: 0; color: var(--muted); font-size: 15px; } .ty-title { margin: 0; font-size: clamp(22px, 3vw, 28px); } .ty-sub { max-width: 58ch; margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 2; } .ty-number { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px 10px 18px; border: 2px dashed #CFE9DA; border-radius: 14px; background: var(--green-tint); } .ty-number span { font-size: 13.5px; color: var(--ink-2); } .ty-number b { font-size: 24px; font-weight: 900; letter-spacing: 1px; color: var(--ink); } .ty-copy.c2c-copy { display: inline-flex; align-items: center; gap: 4px; border-color: #BFE3CF; color: var(--green); background: #fff; } .ty-note { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--muted); } .ty-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); width: min(620px, 100%); margin: 24px 0 4px; padding: 0; } .ty-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .ty-steps li + li::before { content: ""; position: absolute; top: 15px; right: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; } .ty-steps li.is-done + li::before, .ty-steps li.is-done + li.is-current::before { background: var(--green); } .ty-dot { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-weight: 800; } .ty-steps .is-done .ty-dot { background: var(--green); border-color: var(--green); color: #fff; } .ty-steps .is-done { color: var(--ink); } .ty-steps .is-current .ty-dot { border-color: var(--amber); color: #8A5A00; box-shadow: 0 0 0 4px var(--amber-tint); } .ty-steps .is-current { color: var(--ink); font-weight: 700; } .ty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .ty-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ty-facts li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; background: #fff; border-radius: var(--r-card); } .ty-ic { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--bg); color: var(--red); } .ty-facts li > span:last-child { display: grid; min-width: 0; } .ty-facts small { font-size: 12px; color: var(--muted); } .ty-facts b { font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.7; } .ty-total, .ty-total .amount { color: var(--red); } .ty-card { background: #fff; border-radius: var(--r-card); padding: 20px 22px; } .ty-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 17px; } .ty-h .cm-icon { color: var(--red); } .ty-h small { font-weight: 500; color: var(--muted); font-size: 13px; } .ty-pay > :last-child { margin-bottom: 0; } .ty-pay p { color: var(--ink-2); line-height: 2; } .ty-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .ty-side { display: grid; gap: 18px; } .ty-list { list-style: none; margin: 0; padding: 0; } .ty-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ty-list li:first-child { padding-top: 0; } .ty-thumb { width: 68px; height: 68px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; } .ty-thumb img { width: 100%; height: 100%; object-fit: contain; } .ty-item-text { flex: 1; min-width: 0; display: grid; gap: 2px; } .ty-item-text a, .ty-item-text b { font-weight: 700; color: var(--ink); line-height: 1.8; } .ty-item-text a:hover { color: var(--red); } .ty-item-text small { font-size: 12.5px; color: var(--muted); } .ty-meta p { display: inline; margin: 0; } .ty-meta strong { font-weight: 600; } .ty-item-price { font-weight: 800; white-space: nowrap; } .ty-totals { margin: 12px 0 0; display: grid; gap: 0; } .ty-trow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--ink-2); } .ty-trow dt { font-weight: 500; } .ty-trow dd { margin: 0; font-weight: 700; color: var(--ink); text-align: left; } .ty-trow.is-order_total { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg); font-size: 15.5px; } .ty-trow.is-order_total dd, .ty-trow.is-order_total .amount { color: var(--red); font-size: 18px; font-weight: 900; } .ty-addr p { margin: 0 0 6px; color: var(--ink-2); line-height: 2; font-size: 14px; } .ty-who b { font-size: 15.5px; color: var(--ink); } .ty-line { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--line); } .ty-line span { color: var(--muted); font-size: 13px; } .ty-email { overflow-wrap: anywhere; font-size: 13px; } .ty-cnote { padding: 10px 12px; border-radius: 10px; background: var(--amber-tint); } .ty-help { display: flex; gap: 12px; align-items: flex-start; background: var(--red-tint); } .ty-help > .cm-icon { color: var(--red); flex-shrink: 0; } .ty-help p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); } .ty-help a { font-weight: 800; } @media (max-width: 991px) { .ty-grid { grid-template-columns: 1fr; } .ty-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ty-hero { padding: 32px 16px 24px; } .ty-number { flex-wrap: wrap; justify-content: center; } .ty-number b { font-size: 20px; } .ty-steps { font-size: 11px; } .ty-facts { grid-template-columns: 1fr; } .ty-actions .btn { flex: 1 1 100%; } .ty-list li { flex-wrap: wrap; } .ty-item-price { width: 100%; text-align: left; } } .pcol-dot.is-light::after { border-color: #1E2124 !important; filter: none !important; }