:root{ --rafina-font: 'IRANSansX', Tahoma, sans-serif; --rafina-font-heading: 'IRANSansX', Tahoma, sans-serif; --rafina-font-size: 15px; --rafina-font-dots: 0; --rafina-w-normal: 400; --rafina-w-medium: 600; --rafina-w-bold: 700; --rafina-w-title: 800} @supports (font-variation-settings: 'wght' 400){ body, .rafina-panel-wrap{ font-variation-settings: 'DOTS' var(--rafina-font-dots, 0)}} :root{ --rafina-bg: #f6faf6; --rafina-bg-2: #eef4ee; --rafina-panel: #ffffff; --rafina-border: rgba(20, 40, 25, 0.09); --rafina-border-2: rgba(20, 40, 25, 0.16); --rafina-text: #152018; --rafina-text-dim: #4c5a51; --rafina-text-dimmer: #626e66; --rafina-accent: #1f8034; --rafina-accent-2: #19672a; --rafina-ghost-bg: rgba(20, 40, 25, 0.04); --rafina-ghost-bg-hover: rgba(20, 40, 25, 0.08); --rafina-header-bg: rgba(246, 250, 246, 0.72); --rafina-header-bg-solid: rgba(246, 250, 246, 0.96); --rafina-radius: 18px; --rafina-radius-sm: 12px; --rafina-container: 1220px} html[data-rafina-theme="dark"]{ --rafina-bg: #080b11; --rafina-bg-2: #0d121b; --rafina-panel: #121826; --rafina-border: rgba(255, 255, 255, 0.08); --rafina-border-2: rgba(255, 255, 255, 0.14); --rafina-text: #eef1f7; --rafina-text-dim: #9aa4b8; --rafina-text-dimmer: #8892a4; --rafina-accent-2: #49ca52; --rafina-ghost-bg: rgba(255, 255, 255, 0.04); --rafina-ghost-bg-hover: rgba(255, 255, 255, 0.08); --rafina-header-bg: rgba(8, 11, 17, 0.72); --rafina-header-bg-solid: rgba(8, 11, 17, 0.96)} html, body{ overflow-x: hidden; max-width: 100%} @supports (overflow: clip){ html, body{ overflow-x: clip}} body{ background: var(--rafina-bg); color: var(--rafina-text); position: relative; width: 100%} *, *::before, *::after{ box-sizing: border-box} img, picture, video, canvas, svg{ max-width: 100%} body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, a, span, div{ font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif)} .rafina-container{ max-width: var(--rafina-container); margin: 0 auto; padding-inline: 20px} .rafina-logo-auto{ filter: invert(1) hue-rotate(180deg)} .rafina-logo-fallback.rafina-logo-auto{ filter: none; color: #fff} .rafina-logo-dark{ display: none !important} .rafina-logo-light{ display: inline-block !important} html[data-rafina-theme="dark"] .rafina-logo-light{ display: none !important} html[data-rafina-theme="dark"] .rafina-logo-dark{ display: inline-block !important} .rafina-logo-img, .rafina-logo-fallback{ width: 160px; height: 44px; object-fit: contain; object-position: right center; display: inline-block} .rafina-logo-fallback{ font-weight: 700; font-size: 19px; display: inline-flex; align-items: center} .rafina-page-content{ margin: 32px auto 60px; direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif); line-height: 2; color: var(--rafina-text)} .rafina-page-content h1{ font-size: 24px; font-weight: 800; margin-bottom: 20px} .rafina-cart-popup{ position: fixed; bottom: 24px; left: 24px; z-index: 9999; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; box-shadow: 0 14px 36px rgba(0,0,0,.14); padding: 16px; min-width: 260px; direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif); opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease} .rafina-cart-popup.is-visible{ opacity: 1; transform: translateY(0)} .rafina-cart-popup__head{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--rafina-text); margin-bottom: 14px} .rafina-cart-popup__head svg{ width: 18px; height: 18px; color: var(--rafina-accent-2, #19672a); flex-shrink: 0} .rafina-cart-popup__head span{ flex: 1} .rafina-cart-popup__close{ background: none; border: none; font-size: 18px; line-height: 1; color: var(--rafina-text-dimmer); cursor: pointer; padding: 0} .rafina-cart-popup__actions{ display: flex; gap: 8px} .rafina-cart-popup__continue, .rafina-cart-popup__checkout{ flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none} .rafina-cart-popup__continue{ background: var(--rafina-ghost-bg); color: var(--rafina-text)} .rafina-cart-popup__checkout{ background: var(--rafina-accent-2, #19672a); color: #fff} @media (max-width: 480px){ .rafina-cart-popup{ left: 16px; right: 16px; min-width: 0}} .rafina-offers-track, .rafina-pslider-track, .rafina-pslider2-track, .rafina-cats-row, .rafina-product-grid, .rafina-archive-main, .rafina-archive-layout > *{ min-width: 0} .rafina-container{ width: 100%} .rafina-toman{ width: 1.35em; height: 1.35em; display: inline-block; vertical-align: -0.28em; flex-shrink: 0} .rafina-toman-wrap{ display: inline-flex; align-items: center} .rafina-header{ position: sticky; top: var(--rafina-topbar-sticky-h, 0px); z-index: 100; backdrop-filter: blur(14px) saturate(140%); background: var(--rafina-header-bg); border-bottom: 1px solid var(--rafina-border); direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif)} .rafina-nav-wrap{ display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 20px} .rafina-logo{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; flex-shrink: 0; text-decoration: none; color: var(--rafina-text)} .rafina-main-links{ display: flex; align-items: center; gap: 30px} .rafina-main-links > a{ font-size: 15px; color: var(--rafina-text-dim); font-weight: 500; text-decoration: none; transition: color .2s ease} .rafina-main-links > a:hover{ color: var(--rafina-text)} .rafina-nav-search{ display: flex; align-items: center; gap: 8px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2); border-radius: 11px; padding: 9px 14px; flex: 1; max-width: 340px; min-width: 0} .rafina-nav-search svg{ width: 16px; height: 16px; color: var(--rafina-text-dimmer); flex-shrink: 0} .rafina-nav-search input{ background: transparent; border: none; outline: none; color: var(--rafina-text); font-family: inherit; font-size: 14px; width: 100%; min-width: 0} @media (max-width: 1100px){ .rafina-nav-search{ display: none}} .rafina-nav-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0} .rafina-icon-btn{ width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rafina-text-dim); transition: color .2s ease, border-color .2s ease, background .2s ease; position: relative; flex-shrink: 0; text-decoration: none} .rafina-icon-btn:hover{ color: var(--rafina-accent-2); border-color: var(--rafina-accent-2); background: var(--rafina-ghost-bg-hover)} .rafina-icon-btn svg{ width: 19px; height: 19px} .rafina-cart-count{ position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--rafina-accent-2); color: #06210b; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center} .rafina-btn-ghost{ border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); border-radius: 10px; padding: 0 18px; height: 42px; display: inline-flex; align-items: center; font-weight: 700; font-size: 13.5px; color: var(--rafina-text); text-decoration: none; transition: background .2s ease, border-color .2s ease} .rafina-btn-ghost:hover{ background: var(--rafina-ghost-bg-hover); border-color: var(--rafina-accent-2)} @media (max-width: 640px){ .rafina-btn-ghost{ display: none}} .rafina-burger{ display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0} .rafina-burger span, .rafina-burger span::before, .rafina-burger span::after{ content: ''; display: block; width: 18px; height: 2px; background: var(--rafina-text); position: relative; transition: .25s ease} .rafina-burger span::before{ position: absolute; top: -6px} .rafina-burger span::after{ position: absolute; top: 6px} .rafina-burger.open span{ background: transparent} .rafina-burger.open span::before{ transform: rotate(45deg); top: 0} .rafina-burger.open span::after{ transform: rotate(-45deg); top: 0} @media (max-width: 900px){ .rafina-main-links{ display: none} .rafina-burger{ display: flex}} .rafina-mobile-panel{ display: none; flex-direction: column; gap: 4px; padding: 14px 24px 22px; border-top: 1px solid var(--rafina-border); background: var(--rafina-header-bg-solid)} .rafina-mobile-panel.open{ display: flex} .rafina-mobile-panel .rafina-mp-link{ padding: 12px 6px; color: var(--rafina-text-dim); font-weight: 600; border-bottom: 1px solid var(--rafina-border); text-decoration: none; display: block} .rafina-search-wrap{ position: relative; flex: 1; max-width: 420px} .rafina-search-wrap .rafina-nav-search{ width: 100%} .rafina-search-clear{ background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--rafina-text-dimmer); padding: 0 2px; flex-shrink: 0} .rafina-search-panel{ position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 999; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: 10px; max-height: 70vh; overflow-y: auto; animation: rafinaSearchIn .18s ease-out} @keyframes rafinaSearchIn{ from{ opacity: 0; transform: translateY(-6px)} to{ opacity: 1; transform: none}} .rafina-search-heading{ font-size: 12px; font-weight: 700; color: var(--rafina-text-dimmer); padding: 6px 8px 8px} .rafina-search-empty{ padding: 22px 10px; text-align: center; font-size: 13px; color: var(--rafina-text-dimmer)} .rafina-search-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px} .rafina-search-list button{ width: 100%; display: flex; align-items: center; gap: 10px; text-align: right; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 10px; transition: background .15s ease} .rafina-search-list button:hover{ background: var(--rafina-ghost-bg)} .rafina-search-list img, .rafina-search-noimg{ width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--rafina-bg-2); flex-shrink: 0} .rafina-search-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1} .rafina-search-name{ font-size: 13px; font-weight: 600; color: var(--rafina-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .rafina-search-price{ font-size: 12px; font-weight: 700; color: var(--rafina-accent-2, #19672a)} .rafina-search-banner{ display: block; margin-top: 10px; border-radius: 12px; overflow: hidden} .rafina-search-banner img{ width: 100%; height: 100%; object-fit: cover; display: block} .rafina-search-mobile{ display: none; max-width: none; margin-bottom: 10px} .rafina-mobile-panel .rafina-search-mobile, .rf-bn__sheet .rafina-search-mobile{ display: block} .rafina-mobile-panel .rafina-nav-search, .rf-bn__sheet .rafina-nav-search{ display: flex} .rf-bn__sheet .rafina-search-panel{ position: static; box-shadow: none; border: 0; padding: 6px 0 0; max-height: none; background: transparent; animation: none} @media (max-width: 1100px){ .rafina-search-desktop{ display: none}} @keyframes rafinaPageIn{ from{ opacity: 0; transform: translateY(10px)} to{ opacity: 1; transform: none}} .rafina-page-enter{ animation: rafinaPageIn .32s cubic-bezier(.22,1,.36,1) both} @keyframes rafinaShimmer{ 0%{ background-position: 200% 0} 100%{ background-position: -200% 0}} .rafina-skeleton{ background: linear-gradient(90deg, var(--rafina-bg-2) 25%, var(--rafina-ghost-bg) 37%, var(--rafina-bg-2) 63%); background-size: 200% 100%; animation: rafinaShimmer 1.2s ease-in-out infinite; border-radius: 12px} .rafina-search-suggest{ margin-bottom: 6px} .rafina-search-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 4px} .rafina-search-chip{ display: inline-flex; align-items: center; gap: 6px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--rafina-text); cursor: pointer; transition: border-color .15s ease, background .15s ease; font-family: inherit} .rafina-search-chip:hover{ border-color: var(--rafina-accent-2, #19672a); background: var(--rafina-ghost-bg-hover)} .rafina-search-chip svg{ width: 13px; height: 13px; opacity: .55; flex-shrink: 0} .rafina-mega{ display: flex; align-items: center} .rafina-nav-wrap{ position: relative} .rafina-mega-btn{ display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--rafina-text-dim); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: color .2s ease} .rafina-mega-btn:hover, .rafina-mega-btn.open{ color: var(--rafina-text)} .rafina-mega-btn svg{ width: 17px; height: 17px} .rafina-mega-panel{ position: absolute; top: calc(100% + 12px); inset-inline-start: 0; display: grid; grid-template-columns: 250px max-content; width: max-content; max-width: min(1240px, calc(100vw - 32px)); background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 18px; box-shadow: 0 26px 60px -20px rgba(0,0,0,.28); overflow: hidden; z-index: 200; animation: rafinaSearchIn .18s ease-out} .rafina-mega-panel.has-promo{ grid-template-columns: 250px minmax(560px, max-content)} .rafina-mega-panel::before{ content: ''; position: absolute; top: -12px; inset-inline: 0; height: 12px} .rafina-mega-side{ list-style: none; margin: 0; padding: 10px; background: var(--rafina-bg-2); border-inline-end: 1px solid var(--rafina-border); max-height: min(62vh, 520px); overflow-y: auto} .rafina-mega-side-item{ display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--rafina-text-dim); transition: background .16s ease, color .16s ease} .rafina-mega-side-item span{ flex: 1} .rafina-mega-side-item svg{ width: 15px; height: 15px; opacity: .5; transform: scaleX(-1); flex-shrink: 0} .rafina-mega-side-item:hover, .rafina-mega-side-item.active{ background: var(--rafina-panel); color: var(--rafina-accent-2)} .rafina-mega-icon{ width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0} .rafina-mega-content{ display: flex; gap: 26px; padding: 24px 26px; max-height: min(70vh, 620px); overflow: auto} .rafina-mega-cols{ flex: 1; display: grid; grid-template-rows: repeat(var(--rafina-mega-rows, 1), min-content); grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 22px 26px; align-content: start} .rafina-mega-col{ min-width: 0} .rafina-mega-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px} .rafina-mega-col-title{ display: block; font-size: 14px; font-weight: 800; color: var(--rafina-text); margin-bottom: 12px; text-decoration: none} .rafina-mega-col-title:hover{ color: var(--rafina-accent-2)} .rafina-mega-col a, .rafina-mega-col span{ font-size: 13px; color: var(--rafina-text-dim); text-decoration: none; transition: color .16s ease} .rafina-mega-col a:hover{ color: var(--rafina-accent-2)} .rafina-mega-promo{ flex: 0 1 auto; max-width: 360px; border-radius: 14px; overflow: hidden; align-self: start; display: block} .rafina-mega-promo img{ display: block; max-width: 100%; max-height: min(60vh, 520px); width: auto; height: auto; object-fit: contain} @media (max-width: 1320px){ .rafina-mega-panel{ grid-template-columns: 220px minmax(420px, max-content)} .rafina-mega-promo{ display: none}} .rafina-mega-mobile-open{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px; margin-bottom: 8px; border: 1px solid var(--rafina-border-2); border-radius: 12px; background: var(--rafina-ghost-bg); color: var(--rafina-text); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer} .rafina-mega-mobile-open-label{ display: flex; align-items: center; gap: 9px} .rafina-mega-mobile-open svg{ width: 17px; height: 17px} .rafina-mega-mobile-open > svg{ opacity: .45; transform: scaleX(-1)} .rafina-mega-sheet{ position: fixed; inset: 0; z-index: 2147483000; background: var(--rafina-bg); display: flex; flex-direction: column; animation: rafinaSheetIn .22s cubic-bezier(.22,1,.36,1) both} @keyframes rafinaSheetIn{ from{ transform: translateX(-100%)} to{ transform: none}} .rafina-mega-sheet-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rafina-border); background: var(--rafina-header-bg-solid); flex-shrink: 0} .rafina-mega-sheet-title{ font-size: 15px; font-weight: 800; color: var(--rafina-text)} .rafina-mega-sheet-back{ display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; color: var(--rafina-text); font-family: inherit; font-size: 15px; font-weight: 800; padding: 0} .rafina-mega-sheet-back svg{ width: 17px; height: 17px; opacity: .55} .rafina-mega-sheet-close{ width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); color: var(--rafina-text-dim); font-size: 15px; cursor: pointer; line-height: 1} .rafina-mega-sheet-body{ flex: 1; overflow-y: auto; padding: 14px 18px 34px; -webkit-overflow-scrolling: touch} .rafina-mega-row-btn{ width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 12px; border: 0; border-bottom: 1px solid var(--rafina-border); background: none; color: var(--rafina-text); text-align: right; text-decoration: none; font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer} .rafina-mega-row-btn span{ flex: 1} .rafina-mega-row-btn svg{ width: 15px; height: 15px; opacity: .4; transform: scaleX(-1); flex-shrink: 0} .rafina-mega-seeall{ display: block; text-align: center; margin-bottom: 16px; padding: 12px; border-radius: 12px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2); font-size: 13.5px; font-weight: 700; color: var(--rafina-accent-2); text-decoration: none} .rafina-mega-group{ margin-bottom: 22px} .rafina-mega-group-title{ display: block; font-size: 14px; font-weight: 800; color: var(--rafina-text); margin-bottom: 8px; text-decoration: none} .rafina-mega-group-link{ display: block; padding: 12px 10px; font-size: 13.5px; color: var(--rafina-text-dim); text-decoration: none; border-bottom: 1px solid var(--rafina-border)} .rafina-header.is-modern{ background: transparent; border-bottom: none; backdrop-filter: none; padding-block: 10px} .rafina-header.is-modern .rafina-nav-wrap{ background: var(--rafina-header-bg); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--rafina-border); border-radius: 20px; padding: 12px 18px 0; box-shadow: 0 10px 30px rgba(16, 40, 22, .07); gap: 14px; flex-wrap: wrap} .rafina-header.is-modern .rafina-logo{ order: 1} .rafina-header.is-modern .rafina-search-wrap, .rafina-header.is-modern .rafina-nav-search{ order: 2} .rafina-header.is-modern .rafina-nav-actions{ order: 3} .rafina-header.is-modern .rafina-main-links{ order: 4; flex-basis: 100%; gap: 4px; margin-top: 10px; padding: 4px 0; border-top: 1px solid var(--rafina-border)} .rafina-header.is-modern .rafina-main-links > a{ padding: 9px 14px; border-radius: 999px; transition: background .18s ease, color .18s ease} .rafina-header.is-modern .rafina-main-links > a:hover{ background: var(--rafina-ghost-bg-hover); color: var(--rafina-text)} .rafina-header.is-modern .rafina-nav-search{ border-radius: 999px; padding: 14px 22px; background: var(--rafina-ghost-bg); border-color: transparent; transition: border-color .18s ease, background .18s ease} .rafina-header.is-modern .rafina-nav-search input{ font-size: 15px} .rafina-header.is-modern .rafina-nav-search svg{ width: 19px; height: 19px} .rafina-header.is-modern .rafina-nav-search:focus-within{ border-color: var(--rafina-accent-2); background: var(--rafina-panel)} .rafina-header.is-modern .rafina-search-wrap, .rafina-header.is-modern .rafina-nav-search{ max-width: 620px; flex: 1} @media (max-width: 1100px){ .rafina-header.is-modern .rafina-search-wrap, .rafina-header.is-modern .rafina-nav-search{ max-width: none}} .rafina-header.is-modern .rafina-nav-actions{ gap: 6px; padding: 4px; border-radius: 999px; background: var(--rafina-ghost-bg)} .rafina-header.is-modern .rafina-icon-btn{ width: 38px; height: 38px; border-radius: 50%; border-color: transparent; background: transparent} .rafina-header.is-modern .rafina-icon-btn:hover{ background: var(--rafina-panel); border-color: transparent} .rafina-header.is-modern .rafina-btn-ghost{ border-radius: 999px; height: 38px; border-color: transparent; background: var(--rafina-accent-2); color: #fff} .rafina-header.is-modern .rafina-btn-ghost:hover{ filter: brightness(1.06); background: var(--rafina-accent-2)} .rafina-header.is-modern .rafina-burger{ border-radius: 50%; border-color: transparent} .rafina-header.is-modern .rafina-mobile-panel{ margin-top: 10px; border: 1px solid var(--rafina-border); border-radius: 18px; background: var(--rafina-header-bg-solid); padding: 10px 16px 16px} .rafina-header.is-modern .rafina-mega-btn{ padding: 9px 14px; border: 0; background: none} @media (max-width: 900px){ .rafina-header.is-modern .rafina-nav-wrap{ padding: 10px 14px}} @media (max-width: 640px){ .rafina-header.is-modern .rafina-nav-wrap{ border-radius: 16px; padding: 8px 12px} .rafina-header.is-modern .rafina-nav-search{ padding: 11px 16px}} .rf-price{ display: flex; flex-direction: column; min-width: 0} .rf-price__was{ display: flex; align-items: center; gap: 6px; min-height: 1.5em; font-size: 0.82em; line-height: 1.5; color: var(--rafina-text-dimmer)} .rf-price__was del{ text-decoration: line-through; font-weight: 400} .rf-price__off{ background: var(--rafina-badge-bg, var(--rafina-accent-2, #19672a)); color: var(--rafina-badge-text, #fff); font-size: 0.86em; font-weight: 700; line-height: 1.35; padding: 1px 7px; border-radius: 999px; flex-shrink: 0} .rf-price__now{ font-weight: 800; line-height: 1.6; color: var(--rafina-price-color, var(--rafina-accent-2, #19672a)); white-space: nowrap} .rf-stock{ min-height: 30px; margin-top: 10px} .rf-stock__bar{ height: 6px; border-radius: 999px; background: var(--rafina-bg-2); overflow: hidden} .rf-stock__bar i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rafina-deal-bar, #ff7043), var(--rafina-deal-sale, #c62828))} .rf-stock__text{ margin: 5px 0 0; font-size: 10.5px; color: var(--rafina-text-dim)} .rf-stock__text b{ color: var(--rafina-deal-sale, #c62828); font-weight: 700} .rf-price.is-center{ align-items: center} .rf-price.is-center .rf-price__was{ justify-content: center} .rf-oos{ position: relative} .rf-oos img, .rf-oos .rf-price{ filter: grayscale(1); opacity: .55} .rf-oos .rf-stock{ opacity: .55} .rf-oos__tag{ display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; background: var(--rafina-oos-bg, #eef0f2); color: var(--rafina-oos-fg, #6b7280); font-size: 11.5px; font-weight: 700; white-space: nowrap} .rafina-varpick{ position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px} .rafina-varpick__veil{ position: absolute; inset: 0; background: rgba(15, 23, 42, .55)} .rafina-varpick__panel{ position: relative; width: min(420px, 100%); max-height: 88vh; overflow: auto; background: var(--rafina-card-bg, #fff); color: var(--rafina-text, #152018); border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28)} .rafina-varpick__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px} .rafina-varpick__head strong{ font-size: 15px} .rafina-varpick__head button{ background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 4px} .rafina-varpick__head button:hover{ opacity: 1} .rafina-varpick__head svg{ width: 18px; height: 18px} .rafina-varpick__note{ margin: 10px 0; font-size: 13px; opacity: .75} .rafina-varpick__note.is-error{ color: var(--rafina-sale, #c62828); opacity: 1} .rafina-varpick__attr{ margin-bottom: 14px} .rafina-varpick__label{ display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px} .rafina-varpick__opts{ display: flex; flex-wrap: wrap; gap: 7px} .rafina-varpick__opt{ display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--rafina-border, #e3e6e4); border-radius: 10px; background: transparent; color: inherit; padding: 7px 12px; font: inherit; font-size: 13px; transition: border-color .15s ease, background .15s ease} .rafina-varpick__opt:hover{ border-color: var(--rafina-accent, #19672a)} .rafina-varpick__opt.is-on{ border-color: var(--rafina-accent, #19672a); background: color-mix(in srgb, var(--rafina-accent, #19672a) 8%, transparent); font-weight: 700} .rafina-varpick__foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px} .rafina-varpick__price{ font-size: 14px; font-weight: 700} .rafina-varpick__add{ cursor: pointer; border: 0; border-radius: 12px; padding: 10px 18px; font: inherit; font-weight: 700; background: var(--rafina-accent, #19672a); color: #fff} .rafina-varpick__add:disabled{ opacity: .5; cursor: default} .rafina-footer{ border-top: 1px solid var(--rafina-border); padding-block: 60px 26px; background: var(--rafina-footer-bg, var(--rafina-bg-2)); direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif); color: var(--rafina-footer-text, var(--rafina-text))} .rafina-footer .rafina-logo, .rafina-footer .rafina-logo-fallback, .rafina-footer .rafina-logo-img, .rafina-footer .rafina-footer-col h4, .rafina-footer .rafina-footer-brand p, .rafina-footer .rafina-footer-col a, .rafina-footer .rafina-footer-contact li{ color: inherit} .rafina-footer .rafina-footer-brand p, .rafina-footer .rafina-footer-col a, .rafina-footer .rafina-footer-contact li{ opacity: .82} .rafina-footer .rafina-footer-col a:hover{ opacity: 1; color: var(--rafina-accent-2)} .rafina-footer .rafina-logo{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px} .rafina-footer-grid{ display: grid; grid-template-columns: 1.3fr .85fr .85fr 1.1fr .7fr; gap: 40px; margin-bottom: 40px} .rafina-footer-brand p{ color: var(--rafina-text-dim); font-size: 14px; margin: 16px 0 0; max-width: 34ch} .rafina-footer-col h4{ font-size: 14.5px; font-weight: 700; margin: 0 0 18px; color: var(--rafina-text)} .rafina-footer-col ul{ display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0} .rafina-footer-col a{ font-size: 14px; color: var(--rafina-text-dim); text-decoration: none; transition: color .2s ease} .rafina-footer-col a:hover{ color: var(--rafina-accent-2)} .rafina-footer-contact li{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rafina-text-dim); direction: ltr; justify-content: flex-end} .rafina-footer-contact svg{ width: 16px; height: 16px; color: var(--rafina-accent-2); flex-shrink: 0} .rafina-footer-trust{ display: flex; flex-direction: column; align-items: flex-start} .rafina-trust-badge{ display: inline-block} .rafina-trust-badge img{ width: 78px; height: auto; display: block; border-radius: 8px} .rafina-footer-bottom{ border-top: 1px solid var(--rafina-border); padding-top: 22px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; text-align: center; background: var(--rafina-footer-bottom-bg, transparent); color: var(--rafina-footer-bottom-color, var(--rafina-text-dimmer))} .rafina-footer-bottom[style], .rafina-footer:not(.is-modern) .rafina-footer-bottom{ border-radius: 0} .rafina-footer .rafina-footer-bottom-links a{ color: inherit; opacity: .85} .rafina-footer .rafina-footer-bottom-links a:hover{ opacity: 1; color: var(--rafina-accent-2)} @media (max-width: 900px){ .rafina-footer-grid{ grid-template-columns: 1fr 1fr}} @media (max-width: 560px){ .rafina-footer-grid{ grid-template-columns: 1fr}} .rafina-footer-socials{ margin-top: 22px} .rafina-footer-socials h4{ font-size: 13.5px; font-weight: 700; margin: 0 0 12px; color: var(--rafina-text)} .rafina-social-row{ display: flex; flex-wrap: wrap; gap: 10px} .rafina-social-btn{ width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--rafina-text-dim); text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease} .rafina-social-btn:hover{ color: var(--rafina-accent-2); border-color: var(--rafina-accent-2); background: var(--rafina-ghost-bg-hover); transform: translateY(-2px)} .rafina-social-btn svg{ width: 18px; height: 18px} .rafina-footer-contact li.rafina-contact-rtl{ direction: rtl; justify-content: flex-start; text-align: right} .rafina-footer-bottom{ flex-direction: column; gap: 10px} .rafina-footer-bottom-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px} .rafina-footer-bottom-links a{ font-size: 12.5px; color: var(--rafina-text-dim); text-decoration: none; transition: color .2s ease} .rafina-footer-bottom-links a:hover{ color: var(--rafina-accent-2)} .rafina-footer.is-modern{ border-top: none; background: transparent; padding-block: 40px 24px} .rafina-footer.is-modern > .rafina-container{ background: var(--rafina-footer-bg, var(--rafina-panel)); border: 1px solid var(--rafina-border); border-radius: 28px; padding: 44px 38px 26px; box-shadow: 0 18px 44px rgba(16, 40, 22, .06)} .rafina-footer.is-modern .rafina-footer-grid{ grid-template-columns: repeat(4, 1fr); gap: 34px; margin-bottom: 34px} .rafina-footer.is-modern .rafina-footer-brand{ grid-column: 1 / -1; padding-bottom: 30px; margin-bottom: 6px; border-bottom: 1px solid var(--rafina-border); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px} .rafina-footer.is-modern .rafina-footer-brand p{ margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 2.1} .rafina-footer.is-modern .rafina-footer-socials{ margin: 0; margin-inline-start: auto} .rafina-footer.is-modern .rafina-footer-socials h4{ display: none} .rafina-footer.is-modern .rafina-social-btn{ width: 40px; height: 40px; border-radius: 50%; border-color: transparent; background: var(--rafina-bg-2)} .rafina-footer.is-modern .rafina-footer-col h4{ position: relative; padding-bottom: 12px; margin-bottom: 16px} .rafina-footer.is-modern .rafina-footer-col h4::after{ content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--rafina-accent-2)} .rafina-footer.is-modern .rafina-footer-col a{ transition: color .18s ease, padding-inline-start .18s ease} .rafina-footer.is-modern .rafina-footer-col a:hover{ padding-inline-start: 4px} .rafina-footer.is-modern .rafina-footer-trust{ align-items: flex-start} .rafina-footer.is-modern .rafina-trust-badge img{ border-radius: 12px} .rafina-footer.is-modern .rafina-footer-bottom{ border-top: 1px solid var(--rafina-border); margin-top: 6px; padding-top: 20px} .rafina-footer.is-modern .rafina-footer-bottom{ margin-inline: -38px; margin-bottom: -26px; padding-inline: 38px; padding-bottom: 20px; border-radius: 0 0 27px 27px} @media (max-width: 900px){ .rafina-footer.is-modern .rafina-footer-bottom{ margin-inline: -20px; margin-bottom: -20px; padding-inline: 20px; border-radius: 0 0 21px 21px}} @media (max-width: 900px){ .rafina-footer.is-modern > .rafina-container{ border-radius: 22px; padding: 30px 20px 20px} .rafina-footer.is-modern .rafina-footer-grid{ grid-template-columns: 1fr 1fr} .rafina-footer.is-modern .rafina-footer-socials{ margin-inline-start: 0}} @media (max-width: 560px){ .rafina-footer.is-modern .rafina-footer-grid{ grid-template-columns: 1fr}} .rafina-cats-section{ margin: 32px auto} .rafina-cats-header{ display: flex; justify-content: flex-start; margin-bottom: 20px} .rafina-cats-header-group{ display: flex; align-items: center; gap: 14px} .rafina-cats-header h3{ font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--rafina-text)} .rafina-cats-grid-btn{ width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--rafina-border-2); background: var(--rafina-panel); display: flex; align-items: center; justify-content: center; color: var(--rafina-accent-2, #19672a); flex-shrink: 0} .rafina-cats-grid-btn svg{ width: 20px; height: 20px} .rafina-cats-box{ border-radius: 24px; border: 1px solid var(--rafina-border); background: var(--rafina-cat-box, var(--rafina-panel)); padding: 18px 20px} .rafina-cats-row{ display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none} .rafina-cats-row::-webkit-scrollbar{ display: none} .rafina-cats-row{ cursor: grab; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain} .rafina-cats-row.is-grabbing{ cursor: grabbing; user-select: none} .rafina-cats-row.is-grabbing img{ pointer-events: none} .rafina-cats-row.is-grabbing{ scroll-behavior: auto; scroll-snap-type: none} .rafina-cats-row.is-grabbing .rafina-cat-item, .rafina-cats-row.is-grabbing .rafina-cat-icon, .rafina-cats-row.is-grabbing .rafina-cat-icon img{ transition: none} .rafina-cats-row.is-grabbing .rafina-cat-item:hover{ transform: none} .rafina-cats-row.is-grabbing .rafina-cat-item:hover .rafina-cat-icon{ transform: none} .rafina-cat-item{ flex-shrink: 0; width: 86px; display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0} .rafina-cat-label-slot{ height: 20px; margin-bottom: 6px; display: flex; align-items: flex-end; justify-content: center; width: 100%} .rafina-cat-floating-label{ font-size: 11px; font-weight: 700; color: var(--rafina-accent-2, #19672a); white-space: nowrap; opacity: 0; transition: opacity .2s ease} .rafina-cat-item.is-active .rafina-cat-floating-label{ opacity: 1} .rafina-cat-icon{ position: relative; width: 100%; height: 86px; border-radius: 18px; overflow: hidden; background: linear-gradient(to bottom, var(--rafina-cat-tile-1, var(--rafina-ghost-bg, #f7f7f7)), var(--rafina-cat-tile-2, var(--rafina-bg-2, #eee))); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease} .rafina-cat-item.is-active .rafina-cat-icon{ border-color: var(--rafina-cat-active, var(--rafina-accent-2, #19672a)); box-shadow: 0 4px 16px rgba(25, 103, 42, 0.18)} .rafina-cat-item:hover .rafina-cat-icon{ transform: translateY(-2px)} .rafina-cat-icon img{ width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; mix-blend-mode: multiply; transition: transform .3s ease} html[data-rafina-theme="dark"] .rafina-cat-icon img{ mix-blend-mode: normal} .rafina-cat-item:hover .rafina-cat-icon img{ transform: scale(1.05)} .rafina-cat-icon-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size: 28px} .rafina-cat-name-slot{ height: 32px; margin-top: 6px; display: flex; align-items: flex-start; justify-content: center; width: 100%} .rafina-cat-label{ font-size: 12px; line-height: 1.3; color: var(--rafina-text-dim); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease} .rafina-cat-item:hover .rafina-cat-label, .rafina-cat-item.is-active .rafina-cat-label{ color: var(--rafina-text)} .rafina-cats-panel{ max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; margin-top: 0} .rafina-cats-panel.is-open{ max-height: 200px; opacity: 1; margin-top: 12px; padding-top: 16px; border-top: 1px dashed var(--rafina-border-2)} .rafina-cats-panel-pills{ display: flex; flex-wrap: wrap; gap: 10px} .rafina-cat-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--rafina-ghost-bg, #f3f3f3); border: 1px solid var(--rafina-border-2); color: var(--rafina-text); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .2s ease, border-color .2s ease} .rafina-cat-pill:hover{ background: var(--rafina-ghost-bg-hover); border-color: var(--rafina-accent-2)} .rafina-cat-pill-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--rafina-accent-2, #19672a)} @media (max-width: 640px){ .rafina-cats-box{ padding: 14px 12px} .rafina-cat-item{ width: 74px} .rafina-cat-icon{ height: 74px; border-radius: 14px} .rafina-cats-row{ gap: 10px}} .rafina-cats--tiles .rafina-cats-box{ background: none; border: 0; padding: 0} .rafina-cats--tiles .rafina-cats-row{ display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--rafina-cat-tile-col, 150px), 1fr)); gap: 14px; overflow: visible; padding: 0; align-items: stretch; cursor: default} .rafina-cats--tiles.is-tiles-slider .rafina-cats-row{ display: flex; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; cursor: grab} .rafina-cats--tiles.is-tiles-slider .rafina-cats-row::-webkit-scrollbar{ display: none} .rafina-cats--tiles.is-tiles-slider .rafina-cats-row.is-grabbing{ cursor: grabbing} .rafina-cats--tiles.is-tiles-slider .rafina-cat-item{ flex: 0 0 var(--rafina-cat-tile-col, 150px)} .rafina-cats--tiles .rafina-cat-item{ display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; min-width: 0; padding: 10px 10px 12px; border-radius: 20px; border: 1px solid var(--rafina-border); background: var(--rafina-panel); cursor: pointer; text-align: center; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease} .rafina-cats--tiles .rafina-cat-item:hover{ transform: translateY(-4px); border-color: var(--rafina-accent-2, #19672a); box-shadow: 0 12px 26px -14px rgba(20, 40, 25, .45)} .rafina-cats--tiles .rafina-cat-item.is-active{ border-color: var(--rafina-accent-2, #19672a); box-shadow: 0 0 0 2px var(--rafina-accent-2, #19672a) inset} .rafina-cats--tiles .rafina-cat-label-slot{ display: none} .rafina-cats--tiles .rafina-cat-icon{ width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--rafina-cat-tile-2, var(--rafina-bg-2)); display: block; margin: 0; border: 0; box-shadow: none; transform: none} .rafina-cats--tiles .rafina-cat-item:hover .rafina-cat-icon{ transform: none} .rafina-cats--tiles .rafina-cat-icon img{ width: 100%; height: 100%; object-fit: cover; padding: 0; mix-blend-mode: normal; transition: transform .35s cubic-bezier(.22,1,.36,1)} .rafina-cats--tiles .rafina-cat-item:hover .rafina-cat-icon img{ transform: scale(1.06)} .rafina-cats--tiles .rafina-cat-icon-fallback{ display: grid; place-items: center; width: 100%; height: 100%; font-size: 30px} .rafina-cats--tiles .rafina-cat-name-slot{ height: auto; margin-top: 10px; display: block} .rafina-cats--tiles .rafina-cat-label{ display: block; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--rafina-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .rafina-cats--tiles .rafina-cat-sub{ display: block; margin-top: 2px; font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-cats--tiles .rafina-cats-panel{ padding-inline: 0} @media (max-width: 700px){ .rafina-cats--tiles .rafina-cats-row{ grid-template-columns: repeat(auto-fill, minmax(var(--rafina-cat-tile-col-m, 104px), 1fr)); gap: 10px} .rafina-cats--tiles.is-tiles-slider .rafina-cat-item{ flex-basis: var(--rafina-cat-tile-col-m, 104px)} .rafina-cats--tiles .rafina-cat-item{ padding: 8px 8px 10px; border-radius: 16px} .rafina-cats--tiles .rafina-cat-icon{ border-radius: 12px} .rafina-cats--tiles .rafina-cat-label{ font-size: 12px}} .rafina-offers-section{ margin: 24px auto 32px; direction: rtl} .rafina-offers-box{ display: flex; align-items: stretch; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 24px; overflow: hidden} .rafina-offers-title-card{ flex-shrink: 0; width: 190px; background: linear-gradient(160deg, var(--rafina-accent-2, #19672a), #0d4319); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; gap: 14px} .rafina-offers-badge{ width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center} .rafina-offers-badge svg{ width: 26px; height: 26px} .rafina-offers-title-card h2{ font-size: 17px; font-weight: 800; margin: 0; line-height: 1.5} .rafina-offers-link{ display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px} .rafina-offers-link svg{ width: 14px; height: 14px} .rafina-offers-track{ flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; padding: 16px 12px; scrollbar-width: none; cursor: grab; user-select: none} .rafina-offers-track, .rafina-offers-track *{ cursor: grab} .rafina-offers-track.is-grabbing, .rafina-offers-track.is-grabbing *{ cursor: grabbing} .rafina-offers-track::-webkit-scrollbar{ display: none} .rafina-offer-card{ flex-shrink: 0; width: 165px; padding: 14px; text-decoration: none; color: inherit; border-radius: 16px; transition: background .2s ease; position: relative} .rafina-offer-card:hover{ background: var(--rafina-ghost-bg)} .rafina-offer-card:not(:last-child)::after{ content: ''; position: absolute; top: 14px; bottom: 14px; left: -2px; width: 1px; background: var(--rafina-border); pointer-events: none} .rafina-offer-card__image{ position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--rafina-bg-2, #eee); margin-bottom: 12px} .rafina-offer-card__image img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; -webkit-user-drag: none; pointer-events: none} html[data-rafina-theme="dark"] .rafina-offer-card__image img{ mix-blend-mode: normal} .rafina-offer-card__sale-badge{ position: absolute; top: 8px; right: 8px; background: #e0432b; color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px} .rafina-offer-card__title{ font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--rafina-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 36px} .rafina-offer-card__price{ font-size: 14.5px} @media (max-width: 782px){ .rafina-offers-box{ flex-direction: column; border-radius: 18px} .rafina-offers-title-card{ width: 100%; flex-direction: row; padding: 16px; gap: 12px} .rafina-offers-badge{ width: 40px; height: 40px; flex-shrink: 0} .rafina-offers-badge svg{ width: 20px; height: 20px} .rafina-offers-title-card h2{ font-size: 15px; flex: 1; text-align: right} .rafina-offer-card{ width: 130px}} .rafina-deal{ display: flex; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 40, 22, .05); direction: rtl} .rafina-deal__side{ flex: 0 0 214px; padding: 22px 20px; color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px} .rafina-deal__icon{ width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: 24px; overflow: hidden} .rafina-deal__icon img{ width: 100%; height: 100%; object-fit: contain} .rafina-deal__side h2{ margin: 0; font-size: 17px; font-weight: 800; color: #fff} .rafina-deal__side p{ margin: 0; font-size: 12px; opacity: .85; line-height: 1.9} .rafina-deal__timer{ display: flex; gap: 6px; margin-top: 2px} .rafina-deal__timer b{ background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 7px 9px; min-width: 40px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums} .rafina-deal__timer span{ display: block; margin-top: 2px; font-size: 9px; font-weight: 400; opacity: .75} .rafina-deal__all{ margin-top: auto; background: #fff; border-radius: 999px; padding: 9px 20px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--rafina-text)} .rafina-deal__rail{ flex: 1; min-width: 0; display: flex; overflow-x: auto; padding: 16px 4px; scrollbar-width: none} .rafina-deal__rail::-webkit-scrollbar{ display: none} .rafina-deal__card{ position: relative; flex: 0 0 190px; padding: 14px; border-inline-start: 1px solid var(--rafina-border)} .rafina-deal__card:first-child{ border-inline-start: 0} .rafina-deal__off{ position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; background: var(--rafina-deal-sale, #c62828); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px} .rafina-deal__img{ display: block; position: relative; aspect-ratio: 1 / 1; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--rafina-bg-2, #eee)} .rafina-deal__img img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; -webkit-user-drag: none} html[data-rafina-theme="dark"] .rafina-deal__img img{ mix-blend-mode: normal} .rafina-deal__name{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--rafina-text); text-decoration: none} .rafina-deal__buy{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px} .rafina-deal__price{ font-size: 14.5px} .rafina-deal__price .woocommerce-Price-currencySymbol{ font-size: 10.5px; font-weight: 600} .rafina-deal__cart{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; background: var(--rafina-accent-2, #19672a); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(25, 103, 42, .28)} .rafina-deal__cart svg{ width: 17px; height: 17px} @media (max-width: 900px){ .rafina-deal{ flex-direction: column} .rafina-deal__side{ flex: none; flex-direction: row; flex-wrap: wrap; text-align: right; align-items: center; gap: 10px 14px; padding: 16px 18px} .rafina-deal__side h2{ font-size: 15.5px} .rafina-deal__side p{ flex: 1 0 100%} .rafina-deal__timer{ margin-inline-start: auto} .rafina-deal__all{ margin: 0} .rafina-deal__card{ flex-basis: 168px} .rafina-deal__img{ height: 124px}} .rafina-offer-card__buy{ display: flex; align-items: center; justify-content: space-between; gap: 8px} .rafina-offer-card__cart-btn{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; background: var(--rafina-accent-2, #19672a); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(25, 103, 42, .28)} .rafina-offer-card__cart-btn svg{ width: 17px; height: 17px} .rafina-banner-section{ margin: 24px auto} .rafina-banner-section a, .rafina-banner-section picture{ display: block} .rafina-banner-image{ width: 100%; height: auto; display: block; border-radius: var(--rafina-radius, 18px); -webkit-user-drag: none; pointer-events: none} @media (max-width: 782px){ .rafina-banner-section.is-desktop-only{ display: none}} @media (min-width: 783px){ .rafina-banner-section.is-mobile-only{ display: none}} .rafina-banner-row-section{ margin: 32px auto} .rafina-banner-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px} .rafina-banner-row.is-four{ grid-template-columns: repeat(4, minmax(0, 1fr))} .rafina-banner-row__item{ overflow: hidden; border-radius: var(--rafina-radius, 18px)} .rafina-banner-row__item a{ display: block} .rafina-banner-row__item img{ width: 100%; height: auto; display: block; -webkit-user-drag: none; pointer-events: none; transition: transform .3s ease} .rafina-banner-row__item:hover img{ transform: scale(1.03)} @media (max-width: 782px){ .rafina-banner-row{ grid-template-columns: minmax(0, 1fr); gap: 12px} .rafina-banner-row.is-four{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}} .rafina-puzzle-section{ margin-block: 26px} .rafina-puzzle-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px} .rafina-puzzle-item{ display: block; position: relative; overflow: hidden; border-radius: var(--rafina-radius, 18px); background: var(--rafina-bg-2); transition: transform .2s ease, box-shadow .2s ease; aspect-ratio: var(--pz-desk, 1280 / 500)} .rafina-puzzle-item picture{ display: block; width: 100%; height: 100%} .rafina-puzzle-item img{ width: 100%; height: 100%; object-fit: cover; display: block} a.rafina-puzzle-item:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .12)} @media (max-width: 782px){ .rafina-puzzle-grid{ grid-template-columns: 1fr; gap: 12px} .rafina-puzzle-section{ margin-block: 18px} .rafina-puzzle-item{ border-radius: 14px; aspect-ratio: var(--pz-mob, 1080 / 420)}} .rafina-enamad-page{ min-height: 56vh; display: flex; align-items: center; justify-content: center; padding-block: 90px} .rafina-enamad-head{ text-align: center; margin-bottom: 26px} .rafina-enamad-head h1{ font-size: 26px; font-weight: 800; color: var(--rafina-text); margin: 0 0 8px} .rafina-enamad-head p{ font-size: 14.5px; line-height: 2; color: var(--rafina-text-dim); margin: 0} .rafina-enamad-card{ background: linear-gradient(180deg, var(--rafina-panel), var(--rafina-bg-2)); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius); padding: 56px 64px; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.25)} .rafina-trust-badges-row{ display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 36px; max-width: 100%} .rafina-trust-badge-item{ display: flex; align-items: center; justify-content: center; min-width: 0} .rafina-trust-badge-item img{ display: block; max-width: 100%; height: auto} .rafina-trust-badge-item iframe{ border: 0; background: transparent} .rafina-enamad-empty{ color: var(--rafina-text-dim); font-size: 14.5px; text-align: center; line-height: 2; margin: 0} @media (max-width: 640px){ .rafina-enamad-page{ padding-block: 56px} .rafina-enamad-card{ padding: 32px 20px} .rafina-trust-badges-row{ gap: 22px} .rafina-enamad-head h1{ font-size: 21px}} .rafina-ct{ padding: 26px 0 60px} .rafina-ct-head{ text-align: center; margin-bottom: 30px} .rafina-ct-head h1{ font-size: 27px; font-weight: 800; margin: 0 0 10px; color: var(--rafina-text)} .rafina-ct-head p{ margin: 0 auto; max-width: 620px; color: var(--rafina-text-dim); font-size: 14px; line-height: 2.1} .rafina-ct-layout{ display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start} .rafina-ct-side{ display: flex; flex-direction: column; gap: 14px} .rafina-ct-card{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 16px); padding: 20px} .rafina-ct-ch{ display: flex; align-items: flex-start; gap: 13px; padding: 13px 0} .rafina-ct-ch + .rafina-ct-ch{ border-top: 1px solid var(--rafina-border)} .rafina-ct-ch:first-child{ padding-top: 0} .rafina-ct-ch:last-child{ padding-bottom: 0} .rafina-ct-ch__icon{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--rafina-bg-2); color: var(--rafina-accent-2, #19672a)} .rafina-ct-ch__icon svg{ width: 20px; height: 20px} .rafina-ct-ch__body{ flex: 1; min-width: 0} .rafina-ct-ch__label{ display: block; font-size: 12px; color: var(--rafina-text-dim); margin-bottom: 4px} .rafina-ct-ch__value{ display: block; font-size: 14.5px; font-weight: 700; color: var(--rafina-text); text-decoration: none; line-height: 1.9; word-break: break-word} a.rafina-ct-ch__value:hover{ color: var(--rafina-accent-2, #19672a)} .rafina-ct-ch__note{ display: block; font-size: 11.5px; color: var(--rafina-text-dim); margin-top: 3px} .rafina-ct-social{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px} .rafina-ct-social a{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rafina-border); border-radius: 99px; padding: 8px 15px; font-size: 12.5px; color: var(--rafina-text); text-decoration: none; transition: all .18s ease; background: var(--rafina-panel)} .rafina-ct-social a:hover{ border-color: var(--rafina-accent-2, #19672a); color: var(--rafina-accent-2, #19672a)} .rafina-ct-social svg{ width: 16px; height: 16px} .rafina-ct-map{ border-radius: var(--rafina-radius, 16px); overflow: hidden; border: 1px solid var(--rafina-border); line-height: 0} .rafina-ct-map iframe{ width: 100%; height: 260px; border: 0} .rafina-ct-form h2{ font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--rafina-text)} .rafina-ct-form__note{ margin: 0 0 20px; font-size: 12.5px; color: var(--rafina-text-dim); line-height: 2} .rafina-ct-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px} .rafina-ct-field{ display: flex; flex-direction: column} .rafina-ct-field.is-full{ grid-column: 1 / -1} .rafina-ct-field label{ font-size: 12.5px; font-weight: 600; color: var(--rafina-text); margin-bottom: 7px} .rafina-ct-field label span{ color: #d63638; margin-inline-start: 3px} .rafina-ct-field input, .rafina-ct-field select, .rafina-ct-field textarea{ width: 100%; box-sizing: border-box; border: 1px solid var(--rafina-border); border-radius: 11px; background: var(--rafina-bg); color: var(--rafina-text); padding: 12px 14px; font: inherit; font-size: 13.5px; transition: border-color .18s ease, box-shadow .18s ease} .rafina-ct-field textarea{ min-height: 140px; resize: vertical; line-height: 2} .rafina-ct-field input:focus, .rafina-ct-field select:focus, .rafina-ct-field textarea:focus{ outline: none; border-color: var(--rafina-accent-2, #19672a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rafina-accent-2, #19672a) 14%, transparent)} .rafina-ct-field.has-error input, .rafina-ct-field.has-error select, .rafina-ct-field.has-error textarea{ border-color: #d63638} .rafina-ct-field__err{ font-size: 11.5px; color: #d63638; margin-top: 6px} .rafina-ct-trap{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none} .rafina-ct-submit{ grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 0; border-radius: 13px; cursor: pointer; background: var(--rafina-accent-2, #19672a); color: #fff; padding: 14px 20px; font: inherit; font-size: 14.5px; font-weight: 700; transition: filter .18s ease, transform .1s ease} .rafina-ct-submit:hover:not(:disabled){ filter: brightness(1.08)} .rafina-ct-submit:active:not(:disabled){ transform: translateY(1px)} .rafina-ct-submit:disabled{ opacity: .6; cursor: default} .rafina-ct-alert{ border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 2; margin-bottom: 18px} .rafina-ct-alert.is-ok{ background: #f0f8f1; border: 1px solid #c3e0c7; color: #1f5c2a} .rafina-ct-alert.is-err{ background: #fcf0f1; border: 1px solid #f0c3c4; color: #8a2c2d} .rafina-ct-faq{ margin-top: 34px} .rafina-ct-faq h2{ font-size: 19px; font-weight: 800; margin: 0 0 16px; color: var(--rafina-text)} .rafina-ct-faq details{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 13px; padding: 15px 18px; margin-bottom: 10px} .rafina-ct-faq summary{ cursor: pointer; font-size: 14px; font-weight: 700; color: var(--rafina-text); list-style: none; display: flex; align-items: center; gap: 10px} .rafina-ct-faq summary::-webkit-details-marker{ display: none} .rafina-ct-faq summary::after{ content: '+'; margin-inline-start: auto; font-size: 19px; font-weight: 400; color: var(--rafina-text-dim); line-height: 1} .rafina-ct-faq details[open] summary::after{ content: '−'} .rafina-ct-faq p{ margin: 12px 0 0; font-size: 13px; line-height: 2.2; color: var(--rafina-text-dim)} @media (max-width: 900px){ .rafina-ct-layout{ grid-template-columns: 1fr}} @media (max-width: 560px){ .rafina-ct-grid{ grid-template-columns: 1fr} .rafina-ct-head h1{ font-size: 22px} .rafina-ct-card{ padding: 16px}} .rafina-ct-login{ text-align: center; padding: 22px 6px 8px} .rafina-ct-login p{ margin: 0 0 6px; font-size: 13.5px; color: var(--rafina-text, #101828)} .rafina-ct-login__why{ font-size: 12.5px; color: var(--rafina-text-dim, #667085)} .rafina-ct-login__btn{ display: inline-flex; margin-top: 14px; text-decoration: none} .rafina-cart-thumb{ width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--rafina-bg-2); border: 1px solid var(--rafina-border); display: block} .rafina-cart-thumb--empty{ display: grid; place-items: center; color: var(--rafina-text-dimmer)} .rafina-cart-thumb--empty svg{ width: 26px; height: 26px} .rafina-cart-meta{ display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0} .rafina-cart-meta span{ font-size: 11.5px; color: var(--rafina-text-dim); background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 7px; padding: 3px 8px} .rafina-cart-price, .rafina-cart-total{ font-size: 15px; font-weight: 800; color: var(--rafina-text); white-space: nowrap} .rafina-cart-total{ font-size: 17px; color: var(--rafina-accent-2)} .rafina-cart-oos{ display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #b32d2e; background: rgba(179,45,46,.09); border-radius: 7px; padding: 3px 9px} .rafina-qty{ display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--rafina-border-2); border-radius: 11px; background: var(--rafina-ghost-bg); padding: 3px} .rafina-qty-btn{ width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--rafina-accent-2); transition: background .15s ease, color .15s ease} .rafina-qty-btn:hover:not(:disabled){ background: var(--rafina-ghost-bg-hover)} .rafina-qty-btn:disabled{ opacity: .35; cursor: not-allowed} .rafina-qty-btn--danger{ color: #b32d2e} .rafina-qty-btn svg{ width: 15px; height: 15px} .rafina-qty-value{ min-width: 26px; text-align: center; font-size: 14px; font-weight: 800; color: var(--rafina-text)} .rafina-cart-btn{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer; background: var(--rafina-accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; text-decoration: none; transition: filter .18s ease, transform .12s ease} .rafina-cart-btn svg{ width: 18px; height: 18px; flex-shrink: 0} .rafina-cart-btn:hover{ filter: brightness(1.08)} .rafina-cart-btn:active{ transform: scale(.985)} .rafina-cart-btn--lg{ height: 52px; font-size: 15px; width: 100%} .rafina-cart-btn--ghost{ background: var(--rafina-ghost-bg); color: var(--rafina-text); border: 1px solid var(--rafina-border-2)} .rafina-freeship{ display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, var(--rafina-panel), var(--rafina-bg-2)); border: 1px solid var(--rafina-border); border-radius: 16px; padding: 15px 17px; margin-top: 14px} .rafina-freeship-icon{ width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--rafina-ghost-bg); color: var(--rafina-text-dim); transition: background .3s ease, color .3s ease} .rafina-freeship-icon svg{ width: 20px; height: 20px} .rafina-freeship.is-done .rafina-freeship-icon{ background: rgba(31,128,52,.14); color: var(--rafina-accent-2)} .rafina-freeship-main{ flex: 1; min-width: 0} .rafina-freeship p{ margin: 0 0 9px; font-size: 12.5px; font-weight: 700; color: var(--rafina-text-dim); line-height: 1.7} .rafina-freeship.is-done p{ color: var(--rafina-accent-2)} .rafina-freeship-track{ height: 8px; border-radius: 99px; background: var(--rafina-border); overflow: hidden} .rafina-freeship-track span{ display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rafina-accent), var(--rafina-accent-2)); transition: width .5s cubic-bezier(.22,1,.36,1)} .rafina-freeship-percent{ font-size: 12.5px; font-weight: 800; color: var(--rafina-text-dim); flex-shrink: 0} .rafina-freeship.is-done .rafina-freeship-percent{ color: var(--rafina-accent-2)} .rafina-cart-page{ padding-block: 26px 60px; direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif)} .rafina-cart-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap} .rafina-cart-title{ display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; color: var(--rafina-text); margin: 0} .rafina-cart-badge{ font-size: 12px; font-weight: 600; color: var(--rafina-text-dim); background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 99px; padding: 4px 11px} .rafina-cart-clear{ display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: #b32d2e; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 6px} .rafina-cart-clear:disabled{ opacity: .5; cursor: not-allowed} .rafina-cart-clear svg{ width: 15px; height: 15px} .rafina-cart-grid{ display: grid; grid-template-columns: 1fr 350px; gap: 22px; align-items: start} .rafina-cart-items{ display: flex; flex-direction: column; gap: 12px} .rafina-cart-item{ position: relative; display: flex; gap: 14px; padding: 16px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; transition: opacity .18s ease, border-color .18s ease} .rafina-cart-item.is-busy{ opacity: .55; pointer-events: none} .rafina-cart-item-main{ flex: 1; min-width: 0; display: flex; flex-direction: column} .rafina-cart-item-name{ font-size: 14.5px; font-weight: 700; color: var(--rafina-text); text-decoration: none; line-height: 1.8; display: block; padding-inline-end: 26px} .rafina-cart-item-name:hover{ color: var(--rafina-accent-2)} .rafina-cart-item-foot{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 14px; flex-wrap: wrap} .rafina-cart-item-price{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px} .rafina-cart-item-price strong{ font-size: 15.5px; font-weight: 800; color: var(--rafina-text)} .rafina-cart-item-price span{ font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-cart-item-remove{ position: absolute; top: 12px; inset-inline-start: 12px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--rafina-text-dimmer); transition: color .15s ease, background .15s ease} .rafina-cart-item-remove:hover{ color: #b32d2e; background: rgba(179,45,46,.08)} .rafina-cart-item-remove svg{ width: 15px; height: 15px} .rafina-cart-summary{ position: sticky; top: 88px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 18px; padding: 20px} .rafina-cart-summary h2{ font-size: 15px; font-weight: 800; color: var(--rafina-text); margin: 0 0 16px} .rafina-cart-rows{ display: flex; flex-direction: column; gap: 12px; padding-block: 4px 16px} .rafina-cart-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--rafina-text-dim)} .rafina-cart-row--save{ color: var(--rafina-accent-2); font-weight: 700} .rafina-cart-row--total{ border-top: 1px solid var(--rafina-border); padding-top: 16px; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--rafina-text)} .rafina-cart-continue{ display: block; text-align: center; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--rafina-text-dim); text-decoration: none} .rafina-cart-continue:hover{ color: var(--rafina-accent-2)} .rafina-cart-trust{ list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rafina-border); display: flex; flex-direction: column; gap: 11px} .rafina-cart-trust li{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rafina-text-dim)} .rafina-cart-trust svg{ width: 16px; height: 16px; color: var(--rafina-accent-2); flex-shrink: 0} .rafina-coupon{ padding-bottom: 16px; border-bottom: 1px solid var(--rafina-border); margin-bottom: 4px} .rafina-coupon > label{ display: block; font-size: 12.5px; font-weight: 700; color: var(--rafina-text-dim); margin-bottom: 9px} .rafina-coupon form{ display: flex; align-items: center; gap: 6px; border: 1px solid var(--rafina-border-2); border-radius: 11px; background: var(--rafina-ghost-bg); padding: 4px} .rafina-coupon-icon{ display: grid; place-items: center; color: var(--rafina-text-dimmer); padding-inline-start: 8px} .rafina-coupon-icon svg{ width: 15px; height: 15px} .rafina-coupon input{ flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 13px; color: var(--rafina-text); padding: 8px 2px} .rafina-coupon button{ border: 0; border-radius: 8px; background: var(--rafina-accent); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 16px; cursor: pointer} .rafina-coupon button:disabled{ opacity: .45; cursor: not-allowed} .rafina-coupon-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px} .rafina-coupon-list li{ display: flex; align-items: center; gap: 8px; font-size: 12px; background: rgba(31,128,52,.08); border-radius: 9px; padding: 7px 10px; color: var(--rafina-accent-2)} .rafina-coupon-list li span{ flex: 1; font-weight: 700} .rafina-coupon-list li em{ font-style: normal; font-weight: 700} .rafina-coupon-list li button{ background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; display: grid; place-items: center; padding: 2px} .rafina-coupon-list li button svg{ width: 13px; height: 13px} .rafina-cart-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 60px 24px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 18px} .rafina-cart-empty-icon{ width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--rafina-ghost-bg); color: var(--rafina-text-dimmer); margin-bottom: 6px} .rafina-cart-empty-icon svg{ width: 32px; height: 32px} .rafina-cart-empty strong{ font-size: 16px; font-weight: 800; color: var(--rafina-text)} .rafina-cart-empty p{ font-size: 13px; color: var(--rafina-text-dim); margin: 0 0 8px} .rafina-cart-empty--drawer{ border: 0; padding: 40px 20px; flex: 1; justify-content: center} .rafina-cart-skeleton{ display: flex; flex-direction: column; gap: 14px; padding-block: 30px} .rafina-cart-skeleton span{ height: 110px; display: block} @media (max-width: 980px){ .rafina-cart-grid{ grid-template-columns: 1fr} .rafina-cart-summary{ position: static}} @media (max-width: 560px){ .rafina-cart-thumb{ width: 68px; height: 68px; border-radius: 12px} .rafina-cart-item{ padding: 13px; gap: 11px} .rafina-cart-item-foot{ padding-top: 12px}} .rafina-toast-wrap{ position: fixed; top: 18px; right: 18px; z-index: 2147483001; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 36px); pointer-events: none} .rafina-toast{ pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 290px; padding: 13px 15px; border-radius: 15px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); box-shadow: 0 18px 44px -14px rgba(0,0,0,.32); animation: rafinaToastIn .3s cubic-bezier(.22,1,.36,1) both} @keyframes rafinaToastIn{ from{ opacity: 0; transform: translateX(28px) scale(.96)} to{ opacity: 1; transform: none}} .rafina-toast-icon{ width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(31,128,52,.12); color: var(--rafina-accent-2)} .rafina-toast-icon svg{ width: 17px; height: 17px} .rafina-toast--error .rafina-toast-icon{ background: rgba(179,45,46,.12); color: #b32d2e} .rafina-toast-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px} .rafina-toast-body strong{ font-size: 13.5px; font-weight: 800; color: var(--rafina-text)} .rafina-toast-body span{ font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-toast-cta{ flex-shrink: 0; cursor: pointer; text-decoration: none; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2); border-radius: 9px; padding: 7px 13px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--rafina-accent-2)} .rafina-toast-cta:hover{ background: var(--rafina-ghost-bg-hover)} .rafina-toast-close{ flex-shrink: 0; width: 26px; height: 26px; border: 0; background: none; cursor: pointer; color: var(--rafina-text-dimmer); display: grid; place-items: center; border-radius: 7px} .rafina-toast-close svg{ width: 13px; height: 13px} @media (max-width: 560px){ .rafina-toast-wrap{ top: 12px; right: 12px; left: 12px} .rafina-toast{ min-width: 0; width: 100%}} .rafina-steps{ display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 26px 20px 30px; margin-bottom: 24px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 18px} .rafina-steps-logo{ display: inline-flex; align-items: center; text-decoration: none} .rafina-steps-logo .rafina-logo-img{ max-height: 44px; width: auto} .rafina-steps-logo-text{ font-size: 19px; font-weight: 800; color: var(--rafina-text)} .rafina-steps-row{ list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 880px} .rafina-step{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center} .rafina-step-dot{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--rafina-bg-2); border: 1px solid var(--rafina-border); color: var(--rafina-text-dimmer); position: relative; z-index: 2; transition: background .25s ease, color .25s ease, border-color .25s ease} .rafina-step-dot svg{ width: 21px; height: 21px} .rafina-step.is-current .rafina-step-dot{ background: var(--rafina-accent); border-color: var(--rafina-accent); color: #fff; box-shadow: 0 0 0 5px rgb(31 128 52 / .12)} .rafina-step-text{ display: flex; flex-direction: column; gap: 3px} .rafina-step-text strong{ font-size: 13px; font-weight: 700; color: var(--rafina-text-dimmer)} .rafina-step-text em{ font-style: normal; font-size: 11px; color: var(--rafina-text-dimmer); opacity: .8} .rafina-step.is-current .rafina-step-text strong{ color: var(--rafina-accent); font-weight: 800} .rafina-step-line{ position: absolute; top: 22px; z-index: 1; height: 3px; border-radius: 99px; inset-inline-start: 50%; width: 100%; background: var(--rafina-border-2)} .rafina-step.is-current .rafina-step-line{ background: var(--rafina-accent)} @media (max-width: 720px){ .rafina-steps{ padding: 20px 12px 22px; gap: 16px} .rafina-step-dot{ width: 38px; height: 38px} .rafina-step-dot svg{ width: 17px; height: 17px} .rafina-step-text strong{ font-size: 11px} .rafina-step-text em{ display: none} .rafina-step-line{ top: 18px}} .rafina-cart-tabs{ display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 20px; background: var(--rafina-bg-2); border: 1px solid var(--rafina-border); border-radius: 14px} .rafina-cart-tab{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 10px; cursor: pointer; background: none; color: var(--rafina-text-dim); font-family: inherit; font-size: 13.5px; font-weight: 700; transition: background .18s ease, color .18s ease, box-shadow .18s ease} .rafina-cart-tab svg{ width: 17px; height: 17px; flex-shrink: 0} .rafina-cart-tab:hover{ color: var(--rafina-text)} .rafina-cart-tab.is-active{ background: var(--rafina-panel); color: var(--rafina-accent-2); box-shadow: 0 2px 8px rgba(0,0,0,.07)} .rafina-cart-tab-badge{ min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rafina-ghost-bg); color: inherit; font-size: 11px; font-weight: 800; display: grid; place-items: center} .rafina-cart-tab.is-active .rafina-cart-tab-badge{ background: rgba(31,128,52,.14)} .rafina-cart-services{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px} .rafina-cart-services li{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--rafina-accent-2)} .rafina-cart-services svg{ width: 13px; height: 13px; flex-shrink: 0} .rafina-cart-services em{ font-style: normal; color: var(--rafina-text-dimmer); font-weight: 400} .rafina-cart-save-btn, .rafina-cart-move-btn{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 10px 0 0; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--rafina-text-dim); transition: color .15s ease} .rafina-cart-save-btn:hover, .rafina-cart-move-btn:hover{ color: var(--rafina-accent-2)} .rafina-cart-save-btn:disabled, .rafina-cart-move-btn:disabled{ opacity: .5; cursor: not-allowed} .rafina-cart-save-btn svg, .rafina-cart-move-btn svg{ width: 15px; height: 15px} .rafina-cart-move-btn{ padding: 9px 15px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); color: var(--rafina-accent-2)} .rafina-cart-actions{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; padding: 14px 4px 0; border-top: 1px solid var(--rafina-border)} .rafina-cart-continue-inline{ font-size: 13px; font-weight: 700; color: var(--rafina-accent-2); text-decoration: none} .rafina-pcm-root{ position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px} .rafina-pcm-backdrop{ position: absolute; inset: 0; background: rgba(4,10,6,.55); backdrop-filter: blur(3px); animation: rafinaFade .2s ease both} .rafina-pcm{ position: relative; z-index: 1; width: min(660px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 22px; overflow: hidden; box-shadow: 0 34px 80px -24px rgba(0,0,0,.4); animation: rafinaPcmIn .28s cubic-bezier(.22,1,.36,1) both} @keyframes rafinaPcmIn{ from{ opacity: 0; transform: translateY(20px) scale(.97)} to{ opacity: 1; transform: none}} .rafina-pcm-head{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 18px 22px; border-bottom: 1px solid var(--rafina-border)} .rafina-pcm-head h3{ flex: 1; margin: 0; font-size: 16px; font-weight: 800; color: var(--rafina-text)} .rafina-pcm-head-icon{ width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(31,128,52,.12); color: var(--rafina-accent-2)} .rafina-pcm-head-icon svg{ width: 19px; height: 19px} .rafina-pcm-close{ width: 34px; height: 34px; border-radius: 10px; cursor: pointer; flex-shrink: 0; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); color: var(--rafina-text-dim); display: grid; place-items: center} .rafina-pcm-close svg{ width: 15px; height: 15px} .rafina-pcm-body{ flex: 1; overflow-y: auto; padding: 20px 22px 24px; -webkit-overflow-scrolling: touch} .rafina-pcm-product{ display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--rafina-bg-2); border-radius: 15px; margin-bottom: 24px} .rafina-pcm-product .rafina-cart-thumb{ width: 62px; height: 62px; border-radius: 12px} .rafina-pcm-product > div{ display: flex; flex-direction: column; gap: 6px; min-width: 0} .rafina-pcm-product strong{ font-size: 13.5px; font-weight: 700; color: var(--rafina-text); line-height: 1.8} .rafina-pcm-product span{ font-size: 13px; font-weight: 800; color: var(--rafina-accent-2)} .rafina-pcm-sec{ margin-bottom: 24px} .rafina-pcm-sec:last-child{ margin-bottom: 0} .rafina-pcm-sec h4{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: var(--rafina-text)} .rafina-pcm-optional{ font-size: 11px; font-weight: 500; color: var(--rafina-text-dimmer); background: var(--rafina-ghost-bg); border-radius: 99px; padding: 3px 10px} .rafina-pcm-service{ width: 100%; display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 14px; margin-bottom: 10px; text-align: right; background: var(--rafina-bg-2); border: 1.5px solid transparent; border-radius: 15px; font-family: inherit; transition: border-color .18s ease, background .18s ease} .rafina-pcm-service:hover{ border-color: var(--rafina-border-2)} .rafina-pcm-service.is-active{ border-color: var(--rafina-accent); background: rgb(31 128 52 / .06)} .rafina-pcm-service-icon{ width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--rafina-panel); color: var(--rafina-accent-2)} .rafina-pcm-service-icon svg{ width: 20px; height: 20px} .rafina-pcm-service-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px} .rafina-pcm-service-info strong{ font-size: 13.5px; font-weight: 700; color: var(--rafina-text)} .rafina-pcm-service-info em{ font-style: normal; font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-pcm-service-price{ font-size: 12.5px; font-weight: 800; color: var(--rafina-accent-2); white-space: nowrap} .rafina-pcm-check{ width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; border: 1.5px solid var(--rafina-border-2); background: var(--rafina-panel); display: grid; place-items: center; color: #fff; transition: background .18s ease, border-color .18s ease} .rafina-pcm-check.is-active{ background: var(--rafina-accent); border-color: var(--rafina-accent)} .rafina-pcm-check svg{ width: 13px; height: 13px} .rafina-pcm-related{ display: flex; align-items: center; gap: 13px; padding: 12px; margin-bottom: 10px; background: var(--rafina-bg-2); border: 1.5px solid transparent; border-radius: 15px; transition: border-color .18s ease, background .18s ease} .rafina-pcm-related.is-active{ border-color: var(--rafina-accent); background: rgb(31 128 52 / .06)} .rafina-pcm-related .rafina-cart-thumb{ width: 56px; height: 56px; border-radius: 11px; background: var(--rafina-panel)} .rafina-pcm-related-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px} .rafina-pcm-related-info strong{ font-size: 13px; font-weight: 700; color: var(--rafina-text); line-height: 1.7} .rafina-pcm-related-info span{ font-size: 12.5px; font-weight: 800; color: var(--rafina-accent-2)} .rafina-pcm-add{ width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; cursor: pointer; border: 1.5px solid var(--rafina-border-2); background: var(--rafina-panel); color: var(--rafina-text-dim); display: grid; place-items: center; transition: background .18s ease, border-color .18s ease, color .18s ease} .rafina-pcm-add:hover{ border-color: var(--rafina-accent); color: var(--rafina-accent-2)} .rafina-pcm-add.is-active{ background: var(--rafina-accent); border-color: var(--rafina-accent); color: #fff} .rafina-pcm-add svg{ width: 16px; height: 16px} .rafina-pcm-foot{ flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px 20px; border-top: 1px solid var(--rafina-border); background: var(--rafina-bg-2); flex-wrap: wrap} .rafina-pcm-total{ display: flex; flex-direction: column; gap: 4px} .rafina-pcm-total span{ font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-pcm-total strong{ font-size: 17px; font-weight: 800; color: var(--rafina-accent-2)} .rafina-pcm-foot .rafina-cart-btn{ min-width: 190px} @media (max-width: 560px){ .rafina-pcm-root{ padding: 0; place-items: end center} .rafina-pcm{ width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0} .rafina-pcm-foot{ flex-direction: column; align-items: stretch} .rafina-pcm-foot .rafina-cart-btn{ width: 100%} .rafina-pcm-total{ flex-direction: row; align-items: baseline; justify-content: space-between}} .rafina-saved-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap} .rafina-saved-delete{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); color: #b32d2e; font-family: inherit; font-size: 12.5px; font-weight: 700; transition: background .15s ease, border-color .15s ease} .rafina-saved-delete:hover{ background: rgba(179,45,46,.08); border-color: rgba(179,45,46,.35)} .rafina-saved-delete:disabled{ opacity: .5; cursor: not-allowed} .rafina-saved-delete svg{ width: 15px; height: 15px; flex-shrink: 0} .rafina-blog-wrap{ margin-block: 28px 60px} .rafina-blog-head{ margin-bottom: 22px} .rafina-blog-head h1{ font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--rafina-text)} .rafina-blog-head p{ margin: 0; color: var(--rafina-text-dim); font-size: 14px; line-height: 2} .rafina-blog-cats{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px} .rafina-blog-cat{ background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--rafina-text-dim); cursor: pointer; font-family: inherit; transition: all .15s ease} .rafina-blog-cat:hover{ border-color: var(--rafina-border-2); color: var(--rafina-text)} .rafina-blog-cat.is-active{ background: var(--rafina-accent-2, #19672a); border-color: var(--rafina-accent-2, #19672a); color: #fff} .rafina-blog-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px} .rafina-blog-card{ display: flex; flex-direction: column; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px); overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease} .rafina-blog-card:hover{ transform: translateY(-4px); border-color: var(--rafina-border-2); box-shadow: 0 14px 32px rgba(0,0,0,.10)} .rafina-blog-card__img{ aspect-ratio: 1200 / 630; background: var(--rafina-bg-2); overflow: hidden} .rafina-blog-card__img img{ width: 100%; height: 100%; object-fit: cover; display: block} .rafina-blog-card__body{ padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1} .rafina-blog-card__cat{ align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--rafina-accent-2, #19672a); background: var(--rafina-ghost-bg); border-radius: 999px; padding: 4px 10px} .rafina-blog-card__title{ font-size: 15.5px; font-weight: 700; line-height: 1.8; margin: 0; color: var(--rafina-text)} .rafina-blog-card__excerpt{ font-size: 13px; line-height: 2; color: var(--rafina-text-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden} .rafina-blog-card__meta{ margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--rafina-text-dimmer); border-top: 1px solid var(--rafina-border)} .rafina-post{ max-width: 820px; margin: 0 auto} .rafina-post__head{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px); padding: 22px 22px 20px; margin-bottom: 18px} .rafina-post__crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--rafina-text-dimmer); margin-bottom: 14px} .rafina-post__crumbs a{ color: inherit; text-decoration: none} .rafina-post__crumbs a:hover{ color: var(--rafina-accent-2, #19672a)} .rafina-post__title{ font-size: 28px; font-weight: 800; line-height: 1.65; margin: 8px 0 0; color: var(--rafina-text); text-wrap: balance} .rafina-post__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 12.5px; color: var(--rafina-text-dimmer); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rafina-border)} .rafina-post__meta-item{ position: relative; display: inline-flex; align-items: center; gap: 6px; line-height: 1.9} .rafina-post__meta-item + .rafina-post__meta-item::before{ content: ''; position: absolute; inset-inline-start: -10px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: currentColor; opacity: .45} .rafina-post__meta-item svg{ flex-shrink: 0; opacity: .75} .rafina-post__avatar{ width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--rafina-ghost-bg)} .rafina-post__avatar.is-letter{ display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--rafina-accent-2, #19672a)} .rafina-post__cover{ aspect-ratio: 1200 / 630; border-radius: var(--rafina-radius, 18px); overflow: hidden; background: var(--rafina-bg-2); margin: 0 0 24px; border: 1px solid var(--rafina-border)} .rafina-post__cover img{ width: 100%; height: 100%; object-fit: cover; display: block} .rafina-post__content{ color: var(--rafina-text-dim); font-size: 15.5px; line-height: 2.2; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px); padding: 26px 24px} .rafina-post__content > *:first-child{ margin-top: 0} .rafina-post__content > *:last-child{ margin-bottom: 0} .rafina-post__content h1, .rafina-post__content h2{ font-size: 21px; font-weight: 800; color: var(--rafina-text); margin: 34px 0 14px; padding-right: 13px; scroll-margin-top: 90px; border-right: 4px solid var(--rafina-accent-2, #19672a)} .rafina-post__content h3{ font-size: 17.5px; font-weight: 700; color: var(--rafina-text); margin: 26px 0 10px; scroll-margin-top: 90px} .rafina-post__content h4{ font-size: 15.5px; font-weight: 700; color: var(--rafina-text); margin: 22px 0 8px} .rafina-post__content p{ margin: 0 0 18px} .rafina-post__content ul, .rafina-post__content ol{ margin: 0 0 18px; padding-right: 22px} .rafina-post__content li{ margin-bottom: 8px; list-style: revert} .rafina-post__content li::marker{ color: var(--rafina-accent-2, #19672a)} .rafina-post__content strong{ color: var(--rafina-text); font-weight: 700} .rafina-post__content a{ color: var(--rafina-accent-2, #19672a); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent)} .rafina-post__content a:hover{ text-decoration-color: currentColor} .rafina-post__content figure{ margin: 24px 0} .rafina-post__content img{ max-width: 100%; height: auto; border-radius: 14px; margin: 22px 0; display: block} .rafina-post__content figure img{ margin: 0} .rafina-post__content figcaption{ margin-top: 9px; font-size: 12.5px; text-align: center; color: var(--rafina-text-dimmer)} .rafina-post__content blockquote{ margin: 24px 0; padding: 16px 18px; background: var(--rafina-ghost-bg); border-right: 4px solid var(--rafina-accent-2, #19672a); border-radius: 12px; color: var(--rafina-text-dim)} .rafina-post__content blockquote p:last-child{ margin-bottom: 0} .rafina-post__content hr{ margin: 30px 0; border: 0; border-top: 1px solid var(--rafina-border)} .rafina-post__content code{ font-family: monospace; font-size: .9em; direction: ltr; display: inline-block; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 6px; padding: 1px 6px} .rafina-post__content pre{ direction: ltr; text-align: left; overflow-x: auto; background: var(--rafina-bg-2); border: 1px solid var(--rafina-border); border-radius: 12px; padding: 14px 16px; margin: 22px 0; line-height: 1.9} .rafina-post__content pre code{ background: none; border: 0; padding: 0} .rafina-post__content table{ width: 100%; border-collapse: collapse; margin: 22px 0; border: 1px solid var(--rafina-border); border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; white-space: nowrap} .rafina-post__content th, .rafina-post__content td{ padding: 12px 14px; text-align: right; font-size: 14px; border-bottom: 1px solid var(--rafina-border)} .rafina-post__content th{ background: var(--rafina-bg-2); font-weight: 700; color: var(--rafina-text)} .rafina-post__content tr:last-child td{ border-bottom: none} .rafina-post__related{ margin-top: 44px} .rafina-post__related h2{ font-size: 19px; font-weight: 800; margin: 0 0 16px; color: var(--rafina-text); display: flex; align-items: center; gap: 10px} .rafina-post__related h2::after{ content: ''; flex: 1; height: 1px; background: var(--rafina-border)} @media (max-width: 782px){ .rafina-blog-grid{ grid-template-columns: 1fr; gap: 16px} .rafina-post__title{ font-size: 22px} .rafina-post__head{ padding: 16px} .rafina-post__content{ font-size: 14.5px; padding: 18px 16px} .rafina-blog-head h1{ font-size: 22px} .rafina-post__meta{ display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; align-items: center; gap: 8px 20px} .rafina-post__meta-item{ line-height: 1.6; min-width: 0} .rafina-post__meta-item + .rafina-post__meta-item::before{ content: none}} @media (max-width: 380px){ .rafina-post__meta{ grid-template-columns: minmax(0, 1fr); gap: 6px}} .rafina-bsec{ margin-block: 30px} .rafina-bsec-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px} .rafina-bsec-header-group{ display: flex; align-items: center; gap: 12px} .rafina-bsec-icon{ width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; border: 1px solid var(--rafina-border); background: var(--rafina-panel); display: flex; align-items: center; justify-content: center; color: var(--rafina-accent-2, #19672a)} .rafina-bsec-icon svg{ width: 22px; height: 22px} .rafina-bsec-header h2{ font-size: 19px; font-weight: 800; margin: 0 0 2px; color: var(--rafina-text)} .rafina-bsec-viewall{ font-size: 12.5px; color: var(--rafina-text-dimmer); text-decoration: none} .rafina-bsec-viewall:hover{ color: var(--rafina-accent-2, #19672a)} .rafina-bsec-track{ display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; cursor: grab; user-select: none; min-width: 0} .rafina-bsec-track::-webkit-scrollbar{ display: none} .rafina-bsec-track.is-grabbing{ cursor: grabbing} .rafina-bsec-card{ position: relative; flex-shrink: 0; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; background: var(--rafina-panel); border: 1px solid var(--rafina-border); transition: transform .2s ease, box-shadow .2s ease} .rafina-bsec-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12)} .rafina-bsec-card__img{ width: 100%; height: 100%; background: var(--rafina-bg-2); overflow: hidden} .rafina-bsec-card__img img{ width: 100%; height: 100%; object-fit: cover; display: block} .rafina-bsec-track.is-large .rafina-bsec-card{ width: 340px; height: 460px} .rafina-bsec-card__shade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.75) 100%)} .rafina-bsec-card__overlay{ position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; color: #fff} .rafina-bsec-track.is-large .rafina-bsec-card__title{ font-size: 16.5px; font-weight: 800; line-height: 1.9; margin: 0 0 6px; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden} .rafina-bsec-track.is-large .rafina-bsec-card__date{ font-size: 12px; opacity: .85} .rafina-bsec-track.is-large .rafina-bsec-card__excerpt{ margin: auto 0 0; font-size: 12.5px; line-height: 2; color: rgba(255,255,255,.92); background: rgba(0,0,0,.35); backdrop-filter: blur(6px); border-radius: 12px; padding: 10px 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden} .rafina-bsec-track.is-small .rafina-bsec-card{ width: 240px; height: auto; display: flex; flex-direction: column} .rafina-bsec-track.is-small .rafina-bsec-card__img{ height: 150px; flex-shrink: 0} .rafina-bsec-card__body{ padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1} .rafina-bsec-track.is-small .rafina-bsec-card__title{ font-size: 14px; font-weight: 700; line-height: 1.8; margin: 0; color: var(--rafina-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden} .rafina-bsec-track.is-small .rafina-bsec-card__date{ font-size: 11.5px; color: var(--rafina-text-dimmer)} .rafina-bsec-track.is-small .rafina-bsec-card__excerpt{ font-size: 12px; line-height: 1.9; color: var(--rafina-text-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden} .rafina-bsec-card__more{ margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--rafina-accent-2, #19672a)} .rafina-bsec-card__more svg{ width: 13px; height: 13px} @media (max-width: 782px){ .rafina-bsec-track.is-large .rafina-bsec-card{ width: 260px; height: 380px} .rafina-bsec-track.is-small .rafina-bsec-card{ width: 200px} .rafina-bsec-track.is-small .rafina-bsec-card__img{ height: 125px}} .rafina-cat-article{ margin-block: 8px 44px} .rafina-cat-article__box{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px); padding: 24px} .rafina-cat-article__title{ font-size: 18px; font-weight: 800; margin: 0 0 14px; color: var(--rafina-text); display: flex; align-items: center; gap: 10px} .rafina-cat-article__title::after{ content: ''; flex: 1; height: 1px; background: var(--rafina-border)} .rafina-cat-article__body{ background: none; border: 0; border-radius: 0; padding: 0} .rafina-cat-article__body.is-clamped{ max-height: 190px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%)} .rafina-cat-article__more{ margin-top: 14px; font: inherit; cursor: pointer; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border); border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--rafina-accent-2, #19672a); transition: border-color .15s ease, background .15s ease} .rafina-cat-article__more:hover{ border-color: var(--rafina-border-2)} @media (max-width: 782px){ .rafina-cat-article__box{ padding: 18px 16px} .rafina-cat-article__body.is-clamped{ max-height: 230px}} .rafina-cmts{ margin-top: 40px} .rafina-cmts__title{ display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; color: var(--rafina-text); margin: 0 0 16px} .rafina-cmts__title svg{ color: var(--rafina-accent-2, #19672a)} .rafina-cmts__count{ font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--rafina-ghost-bg); color: var(--rafina-text-dim)} .rafina-cmts__empty{ padding: 26px 20px; text-align: center; background: var(--rafina-panel); border: 1px dashed var(--rafina-border-2, var(--rafina-border)); border-radius: var(--rafina-radius, 18px)} .rafina-cmts__empty strong{ display: block; font-size: 14.5px; color: var(--rafina-text)} .rafina-cmts__empty p{ margin: 6px 0 0; font-size: 13px; color: var(--rafina-text-dimmer)} .rafina-cmts__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px} .rafina-cmts__list.is-replies{ margin: 12px 0 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--rafina-border)} .rafina-cmt__box{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 14px; padding: 15px 16px} .rafina-cmt__head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--rafina-text-dimmer)} .rafina-cmt__avatar{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover} .rafina-cmt__author{ font-size: 13.5px; font-weight: 700; color: var(--rafina-text)} .rafina-cmt__dot{ opacity: .5} .rafina-cmt__reply{ margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; background: none; border: 0; padding: 4px 6px; border-radius: 8px; color: var(--rafina-accent-2, #19672a)} .rafina-cmt__reply:hover{ background: var(--rafina-ghost-bg)} .rafina-cmt__reply.is-on{ background: var(--rafina-ghost-bg)} .rafina-cmt__body{ margin-top: 10px; font-size: 13.5px; line-height: 2.05; color: var(--rafina-text-dim)} .rafina-cmt__body p{ margin: 0 0 10px} .rafina-cmt__body p:last-child{ margin-bottom: 0} .rafina-cmt-form{ margin-top: 22px; padding: 20px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px)} .rafina-cmt-form h3{ display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--rafina-text)} .rafina-cmt-form__cancel{ margin-inline-start: auto; font: inherit; font-size: 12px; font-weight: 700; background: none; border: 0; cursor: pointer; color: var(--rafina-text-dimmer)} .rafina-cmt-form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px} .rafina-cmt-form input, .rafina-cmt-form textarea{ width: 100%; font: inherit; font-size: 13.5px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--rafina-border); background: var(--rafina-bg-2); color: var(--rafina-text); transition: border-color .15s ease} .rafina-cmt-form input:focus, .rafina-cmt-form textarea:focus{ outline: none; border-color: var(--rafina-accent-2, #19672a)} .rafina-cmt-form textarea{ resize: vertical; line-height: 2} .rafina-cmt-form__note{ margin: 10px 0 0; font-size: 12px; color: var(--rafina-text-dimmer)} .rafina-cmt-form__submit{ margin-top: 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px 26px; border-radius: 12px; border: 0; background: var(--rafina-accent-2, #19672a); color: #fff; transition: opacity .15s ease} .rafina-cmt-form__submit:disabled{ opacity: .6; cursor: default} .rafina-cmt-form__login{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px} .rafina-cmt-form__login .rafina-cmt-form__note{ margin: 0} .rafina-cmt-form__login .rafina-cmt-form__submit{ margin-top: 0; text-decoration: none; display: inline-block} .rafina-cmt-form__msg{ margin: 12px 0 0; font-size: 13px; font-weight: 600} .rafina-cmt-form__msg.is-ok{ color: var(--rafina-accent-2, #19672a)} .rafina-cmt-form__msg.is-err{ color: #c0392b} @media (max-width: 782px){ .rafina-cmt-form{ padding: 16px} .rafina-cmt-form__row{ grid-template-columns: 1fr} .rafina-cmts__list.is-replies{ padding-inline-start: 12px}} .rafina-hero-wrap{ margin-block: 24px} .rafina-hero-slider{ position: relative; width: 100%; aspect-ratio: 2560 / 533; overflow: hidden; border-radius: var(--rafina-radius, 18px); background: var(--rafina-panel); cursor: grab; user-select: none; direction: ltr} .rafina-hero-slider:active{ cursor: grabbing} .rafina-hero-track{ display: flex; height: 100%; direction: ltr; transition: transform .5s ease} .rafina-hero-slide{ flex-shrink: 0; width: 100%; height: 100%} .rafina-hero-slide a, .rafina-hero-slide picture{ display: block; width: 100%; height: 100%} .rafina-hero-slide img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-user-drag: none; pointer-events: none} .rafina-hero-dots{ position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5} .rafina-hero-dot{ width: 24px; height: 24px; border: none; background: none; cursor: pointer; padding: 0; display: grid; place-items: center} .rafina-hero-dot::before{ content: ''; display: block; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.5); transition: width .25s ease, background .25s ease} .rafina-hero-dot.is-active::before{ width: 24px; background: var(--rafina-accent-2, #19672a)} @media (max-width: 782px){ .rafina-hero-slider{ aspect-ratio: 1 / 1; border-radius: 12px}} .rafina-hero-split{ --r: clamp(12px, 6cqh, 26px); --s: clamp(14px, 9cqh, 34px); --gap: clamp(6px, 3cqh, 13px); --sw: 32cqw; --bw: 9cqw; --bh: 52cqh; container-type: size; position: relative; width: 100%; aspect-ratio: 2560 / 533} .rafina-hero-split__main, .rafina-hero-split__side{ position: absolute; inset-block: 0; overflow: hidden; border-radius: var(--r); display: block} .rafina-hero-split__main{ left: 0; width: calc(100cqw - var(--sw) + var(--bw))} .rafina-hero-split__side{ right: 0; width: var(--sw)} .rafina-hero-split picture, .rafina-hero-split img{ position: absolute; top: 0; width: 100cqw; height: 100cqh; max-width: none; display: block} .rafina-hero-split img{ object-fit: cover} .rafina-hero-split .rafina-hero-split__main picture, .rafina-hero-split .rafina-hero-split__main img{ left: 0} .rafina-hero-split .rafina-hero-split__side picture, .rafina-hero-split .rafina-hero-split__side img{ right: 0} .rafina-hero-split .rafina-hero-split__side.has-own picture, .rafina-hero-split .rafina-hero-split__side.has-own img{ inset: 0; width: 100%; height: 100%} .rafina-hero-split__main, .rafina-hero-split__side{ --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%); --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0); --_d: calc(var(--s) + var(--r)); -webkit-mask: var(--_mask); mask: var(--_mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; --_mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y))} .rafina-hero-split{ --_i: calc(var(--s) + var(--r)); --_gv: calc(var(--gap) * 1.85)} .rafina-hero-split__main{ --x: max(0px, calc(var(--bw) + var(--_gv) - var(--_i))); --y: max(0px, calc(100cqh - var(--bh) + var(--gap) - var(--_i))); transform: scale(-1, -1)} .rafina-hero-split__main img{ transform: scale(-1, -1)} .rafina-hero-split .rafina-hero-split__main picture, .rafina-hero-split .rafina-hero-split__main img{ left: auto; right: 0; top: auto; bottom: 0} .rafina-hero-split__side{ --x: max(0px, calc(var(--bw) + var(--_gv) - var(--_i))); --y: max(0px, calc(var(--bh) + var(--gap) - var(--_i)))} .rafina-hero-split:not(.is-start){ transform: scaleX(-1)} .rafina-hero-split:not(.is-start) img{ transform: scaleX(-1)} .rafina-hero-split:not(.is-start) .rafina-hero-split__main img{ transform: scale(1, -1)} @supports not (mask: conic-gradient(#000, #000)){ .rafina-hero-split__main{ width: calc(100cqw - var(--sw) - var(--gap)); transform: none} .rafina-hero-split__main img{ transform: none}} .rafina-hero-slider.is-split{ aspect-ratio: auto; border-radius: 0; background: none; padding-bottom: 28px} .rafina-hero-slider.is-split .rafina-hero-track, .rafina-hero-slider.is-split .rafina-hero-slide, .rafina-hero-slider.is-split .rafina-hero-slide a{ height: auto} .rafina-hero-slider.is-split .rafina-hero-dots{ bottom: 0} .rafina-hero-slider.is-split .rafina-hero-dot::before{ background: var(--rafina-border-2, rgba(20,40,25,.16))} .rafina-hero-slider.is-split .rafina-hero-dot.is-active::before{ background: var(--rafina-accent-2, #19672a)} @media (max-width: 782px){ .rafina-hero-split{ --r: clamp(10px, 3cqh, 18px); --s: clamp(12px, 4.5cqh, 26px); --gap: clamp(3px, 0.8cqh, 6px); --sw: 42cqw; --bw: 13cqw; --bh: 34cqh; aspect-ratio: 1 / 1}} @media (max-width: 782px){ .rafina-hero-slide.is-desktop-only{ display: none}} @media (min-width: 783px){ .rafina-hero-slide.is-mobile-only{ display: none}} .rafina-topbar{ position: relative; width: 100%; display: flex; align-items: center; overflow: hidden; z-index: 60} .rafina-topbar.is-sticky{ position: sticky; top: 0; z-index: 120} .rafina-topbar.is-animated{ background-size: 300% 100% !important} .rafina-topbar.is-animated::before{ content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 600%; background: inherit; background-size: 50% 100%; background-repeat: repeat; animation: rafinaTopbarShift var(--rafina-topbar-speed, 12s) linear infinite; will-change: transform; pointer-events: none; z-index: 0} @keyframes rafinaTopbarShift{ from{ transform: translate3d(0, 0, 0)} to{ transform: translate3d(-50%, 0, 0)}} .rafina-topbar.is-animated > *{ position: relative; z-index: 1} @media (prefers-reduced-motion: reduce){ .rafina-topbar.is-animated::before{ animation: none}} .rafina-topbar__veil{ position: absolute; inset: 0; background: rgba(0, 0, 0, var(--rafina-topbar-veil, 0)); pointer-events: none} .rafina-topbar__inner{ position: relative; width: min(1240px, 100%); margin-inline: auto; padding: 6px 16px; display: flex; align-items: center; gap: 8px; line-height: 1.8; font-weight: 600} .rafina-topbar__icon{ width: 20px; height: 20px; object-fit: contain; flex-shrink: 0} .rafina-topbar__emoji{ font-size: 1.1em; line-height: 1; flex-shrink: 0} .rafina-topbar__text{ min-width: 0} .rafina-topbar__btn{ flex-shrink: 0; margin-inline-start: 4px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); color: inherit; text-decoration: none; font-size: .92em; font-weight: 700; transition: background .16s ease} .rafina-topbar__btn:hover{ background: rgba(255, 255, 255, .3)} .rafina-topbar__close{ position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: transparent; color: inherit; opacity: .7; font: inherit; font-size: 17px; line-height: 1; transition: opacity .16s ease, background .16s ease} .rafina-topbar__close:hover{ opacity: 1; background: rgba(255, 255, 255, .18)} .rafina-topbar__inner.is-marquee{ overflow: hidden; display: block; padding-inline: 0} .rafina-topbar__inner.is-marquee .rafina-topbar__track{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding-inline-start: 100%; animation: rafinaTopbarMarquee var(--rafina-topbar-marquee, 18s) linear infinite} .rafina-topbar:hover .rafina-topbar__track{ animation-play-state: paused} @keyframes rafinaTopbarMarquee{ from{ transform: translateX(0)} to{ transform: translateX(100%)}} @media (max-width: 782px){ .rafina-topbar__inner{ padding: 5px 34px 5px 12px; gap: 6px} .rafina-topbar.is-mobile-off{ display: none}} @media (prefers-reduced-motion: reduce){ .rafina-topbar.is-animated{ animation: none} .rafina-topbar__inner.is-marquee .rafina-topbar__track{ animation: none; padding-inline-start: 0}} .rafina-info-wrap{ padding-block: 26px 46px} .rafina-info-head{ text-align: center; max-width: 680px; margin: 0 auto 26px} .rafina-info-head h1{ margin: 0 0 10px; font-size: 26px; font-weight: 800; color: var(--rafina-text)} .rafina-info-head p{ margin: 0; font-size: 14px; line-height: 2.1; color: var(--rafina-text-dim)} .rafina-info-updated{ display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--rafina-ghost-bg); font-size: 12px; color: var(--rafina-text-dimmer)} .rafina-faq{ max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px} .rafina-faq__item{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease} .rafina-faq__item.is-open{ border-color: var(--rafina-accent-2, #19672a); box-shadow: 0 10px 26px -18px rgba(20, 40, 25, .5)} .rafina-faq__q{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--rafina-text); text-align: start} .rafina-faq__q:hover{ color: var(--rafina-accent-2, #19672a)} .rafina-faq__q span{ flex: 1; min-width: 0} .rafina-faq__sign{ flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--rafina-ghost-bg); color: var(--rafina-accent-2, #19672a); transition: transform .2s ease, background .2s ease} .rafina-faq__item.is-open .rafina-faq__sign{ transform: rotate(180deg)} .rafina-faq__sign svg{ width: 14px; height: 14px} .rafina-faq__a{ padding: 0 18px 18px; font-size: 13.5px; line-height: 2.2; color: var(--rafina-text-dim)} .rafina-faq__a p{ margin: 0 0 10px} .rafina-faq__a p:last-child{ margin-bottom: 0} .rafina-faq__img{ display: block; max-width: 100%; margin-top: 14px; border-radius: 12px; border: 1px solid var(--rafina-border)} .rafina-terms{ max-width: 820px; margin-inline: auto; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: var(--rafina-radius, 18px); padding: 30px 32px} .rafina-terms h2{ margin: 26px 0 12px; font-size: 18px; font-weight: 800; color: var(--rafina-text); scroll-margin-top: 90px} .rafina-terms h2:first-child{ margin-top: 0} .rafina-terms p{ margin: 0 0 12px; font-size: 14.5px; line-height: 2.3; color: var(--rafina-text-dim); text-align: justify} .rafina-terms__toc{ margin: 0 0 26px; padding: 16px 18px; border-radius: 14px; background: var(--rafina-bg-2); border: 1px solid var(--rafina-border)} .rafina-terms__toc strong{ display: block; font-size: 13px; margin-bottom: 10px} .rafina-terms__toc ol{ margin: 0; padding-inline-start: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px} .rafina-terms__toc a{ font-size: 13px; color: var(--rafina-text-dim); text-decoration: none} .rafina-terms__toc a:hover{ color: var(--rafina-accent-2, #19672a)} @media (max-width: 782px){ .rafina-info-head h1{ font-size: 21px} .rafina-terms{ padding: 20px 18px} .rafina-terms p{ font-size: 13.5px} .rafina-faq__q{ padding: 14px; font-size: 13.5px} .rafina-faq__a{ padding: 0 14px 14px}} .rafina-help-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch} @media (max-width: 1100px){ .rafina-help-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}} @media (max-width: 640px){ .rafina-help-grid{ grid-template-columns: minmax(0, 1fr); gap: 14px}} .rafina-help-card{ display: flex; flex-direction: column; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 18px; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease} .rafina-help-card:hover{ border-color: var(--rafina-accent-2, #19672a); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 40, 22, .07)} .rafina-help-card__media{ display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--rafina-bg-2, #f3f4f6); border-bottom: 1px solid var(--rafina-border); padding: 10px; overflow: hidden} .rafina-help-card__media img{ max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; object-fit: contain} a.rafina-help-card__media{ cursor: zoom-in} .rafina-help-card__body{ padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px} .rafina-help-card__head{ display: flex; align-items: center; gap: 10px} .rafina-help-card__num{ flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--rafina-step-num-bg, var(--rafina-accent-2, #19672a)); color: var(--rafina-step-num-text, #fff); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums} .rafina-help-card__head h2{ margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.7; color: var(--rafina-text)} .rafina-help-card__body p{ margin: 0; font-size: 13px; line-height: 2.1; color: var(--rafina-text-dim); text-align: justify} .rafina-help-card__body p + p{ margin-top: 8px} .rafina-help-card__more{ margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--rafina-accent-2, #19672a)} .rafina-help-card__more svg{ width: 15px; height: 15px} .rafina-usage-search{ display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 26px; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--rafina-panel); border: 1px solid var(--rafina-border)} .rafina-usage-search svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--rafina-text-dimmer)} .rafina-usage-search input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--rafina-text)} .rafina-usage-search input::-webkit-search-cancel-button{ display: none} .rafina-usage-search button{ border: 0; cursor: pointer; background: var(--rafina-ghost-bg); color: var(--rafina-text-dim); width: 26px; height: 26px; border-radius: 50%; font-size: 12px; line-height: 1} .rafina-usage-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin-inline: auto} @media (max-width: 720px){ .rafina-usage-list{ grid-template-columns: minmax(0, 1fr)}} .rafina-usage-tile{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease} .rafina-usage-tile:hover{ border-color: var(--rafina-accent-2, #19672a); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 40, 22, .06)} .rafina-usage-tile__img{ flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: var(--rafina-bg-2, #f3f4f6); overflow: hidden} .rafina-usage-tile__img img{ max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px} .rafina-usage-tile h2{ margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.8; color: var(--rafina-text)} .rafina-usage-list.is-loading .is-skeleton{ display: block; height: 84px; border-radius: 16px; background: var(--rafina-ghost-bg)} .rafina-usage-crumbs{ display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 12.5px; color: var(--rafina-text-dim)} .rafina-usage-crumbs a{ color: inherit; text-decoration: none} .rafina-usage-crumbs a:hover{ color: var(--rafina-accent-2, #19672a)} .rafina-usage-crumbs svg{ width: 14px; height: 14px; opacity: .6} .rafina-usage-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px} .rafina-usage-head__img{ flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--rafina-bg-2, #f3f4f6); overflow: hidden} .rafina-usage-head__img img{ max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px} .rafina-usage-head h1{ margin: 0; font-size: 22px; font-weight: 800; color: var(--rafina-text)} .rafina-usage-intro p, .rafina-info-wrap > p{ margin: 0 0 10px; font-size: 13.5px; line-height: 2.1; color: var(--rafina-text-dim); text-align: justify} .rafina-usage-note{ margin: 4px 0 18px; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(217, 119, 6, .28); background: rgba(217, 119, 6, .07); color: #92400e; font-size: 13px; line-height: 2} html[data-rafina-theme="dark"] .rafina-usage-note{ color: #fbbf24} .rafina-usage-steps{ display: flex; flex-direction: column; gap: 14px; max-width: 1060px; margin-inline: auto} .rafina-usage-step{ display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 16px; background: var(--rafina-panel); border: 1px solid var(--rafina-border)} .rafina-usage-step:nth-child(even){ grid-template-columns: minmax(0, 1fr) minmax(0, 42%)} .rafina-usage-step:nth-child(even) .rafina-usage-step__media{ order: 2} .rafina-usage-step:not(:has(.rafina-usage-step__media)), .rafina-usage-step:nth-child(even):not(:has(.rafina-usage-step__media)){ grid-template-columns: minmax(0, 1fr)} @media (max-width: 900px){ .rafina-usage-step, .rafina-usage-step:nth-child(even){ grid-template-columns: minmax(0, 1fr)} .rafina-usage-step:nth-child(even) .rafina-usage-step__media{ order: 0} .rafina-usage-step__media{ padding: 12px 12px 0} .rafina-usage-step__body{ padding: 16px 16px 18px}} .rafina-usage-step__media{ display: grid; place-items: center; padding: 14px; background: var(--rafina-bg-2, #f3f4f6); overflow: hidden} .rafina-usage-step__media img{ display: block; max-width: 100%; max-height: 290px; width: auto; height: auto; border-radius: 10px} .rafina-usage-step__body{ padding: 22px 24px; align-self: center} .rafina-usage-step__body h2{ display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--rafina-text)} .rafina-usage-step__num{ flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--rafina-step-num-bg, var(--rafina-accent-2, #19672a)); color: var(--rafina-step-num-text, #fff); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums} .rafina-usage-step__body p{ margin: 0; font-size: 13px; line-height: 2.1; color: var(--rafina-text-dim); text-align: justify} .rafina-usage-step__body p + p{ margin-top: 8px} .rafina-usage-cta{ display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; padding: 13px 30px; border-radius: 14px; background: var(--rafina-accent-2, #19672a); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none} .rafina-usage-tabs{ display: flex; gap: 6px; margin: 18px 0 16px; padding: 5px; background: var(--rafina-bg-2, #f3f4f6); border: 1px solid var(--rafina-border); border-radius: 14px} .rafina-usage-tabs__btn{ flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--rafina-muted, #667085); transition: background .18s ease, color .18s ease} .rafina-usage-tabs__btn span{ min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--rafina-border); font-size: 11.5px; font-weight: 700; color: var(--rafina-muted, #667085)} .rafina-usage-tabs__btn:hover{ color: var(--rafina-text, #101828)} .rafina-usage-tabs__btn.is-active{ background: var(--rafina-panel, #fff); color: var(--rafina-accent-2, #19672a); box-shadow: 0 1px 3px rgba(16, 40, 22, .1)} .rafina-usage-tabs__btn.is-active span{ background: var(--rafina-accent-2, #19672a); color: #fff} .rafina-usage-accs{ display: flex; flex-direction: column; gap: 10px} .rafina-usage-acc{ border: 1px solid var(--rafina-border); border-radius: 14px; background: var(--rafina-panel, #fff); overflow: hidden; transition: border-color .18s ease} .rafina-usage-acc.is-open{ border-color: var(--rafina-accent-2, #19672a)} .rafina-usage-acc__head{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; cursor: pointer; font: inherit; text-align: start; color: inherit} .rafina-usage-acc__head:hover{ background: var(--rafina-bg-2, #f7f8fa)} .rafina-usage-acc__img{ display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--rafina-bg-2, #f3f4f6); overflow: hidden} .rafina-usage-acc__img img{ max-width: 100%; max-height: 100%; object-fit: contain} .rafina-usage-acc__title{ flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--rafina-text, #101828)} .rafina-usage-acc__count{ flex: 0 0 auto; font-size: 12px; color: var(--rafina-muted, #667085)} .rafina-usage-acc__head svg{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--rafina-muted, #667085); transition: transform .2s ease} .rafina-usage-acc.is-open .rafina-usage-acc__head svg{ transform: rotate(180deg)} .rafina-usage-acc__body{ padding: 4px 10px 10px; border-top: 1px solid var(--rafina-border)} .rafina-usage-rows{ display: flex; flex-direction: column; gap: 8px} .rafina-usage-acc__body .rafina-usage-rows{ gap: 6px} .rafina-usage-row{ display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--rafina-border); border-radius: 12px; background: var(--rafina-panel, #fff); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease} .rafina-usage-acc__body .rafina-usage-row{ border-color: transparent; background: none} .rafina-usage-row:hover{ border-color: var(--rafina-accent-2, #19672a); background: var(--rafina-bg-2, #f7f8fa); transform: translateX(-2px)} .rafina-usage-row__img{ display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; background: var(--rafina-bg-2, #f3f4f6); overflow: hidden} .rafina-usage-row__img img{ max-width: 100%; max-height: 100%; object-fit: contain} .rafina-usage-row__ph{ display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--rafina-border)} .rafina-usage-row__title{ flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--rafina-text, #101828)} .rafina-usage-row > svg{ flex: 0 0 auto; width: 16px; height: 16px; color: var(--rafina-muted, #667085)} .rafina-usage-rows.is-loading .is-skeleton{ height: 60px; border-radius: 12px; background: linear-gradient(90deg, var(--rafina-bg-2, #f1f2f4) 25%, var(--rafina-border) 37%, var(--rafina-bg-2, #f1f2f4) 63%); background-size: 400% 100%; animation: rafina-usage-shine 1.2s ease infinite} @keyframes rafina-usage-shine{ from{ background-position: 100% 50%} to{ background-position: 0 50%}} button.rafina-usage-step__media{ border: 0; padding: 0; font: inherit; width: 100%} .rafina-lightbox{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: rgba(8, 12, 10, .82); backdrop-filter: blur(2px); animation: rafina-lightbox-in .18s ease} @keyframes rafina-lightbox-in{ from{ opacity: 0} to{ opacity: 1}} .rafina-lightbox img{ max-width: min(1100px, 100%); max-height: 100%; border-radius: 12px; background: #fff; cursor: default} .rafina-lightbox__close{ position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 17px; cursor: pointer; transition: background .18s ease} .rafina-lightbox__close:hover{ background: rgba(255, 255, 255, .28)} button.rafina-help-card__media{ position: relative; width: 100%; border: 0; border-bottom: 1px solid var(--rafina-border); cursor: zoom-in; font: inherit} .rafina-help-card__zoom{ position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(16, 24, 40, .55); color: #fff; opacity: 0; transition: opacity .18s ease} .rafina-help-card__zoom svg{ width: 16px; height: 16px} .rafina-help-card:hover .rafina-help-card__zoom{ opacity: 1} .rafina-help-card__media.is-empty{ display: grid; place-items: center; background: var(--rafina-bg-2, #f3f4f6)} .rafina-help-card__media.is-empty span{ font-size: 46px; font-weight: 800; line-height: 1; color: var(--rafina-border)} .rafina-usage-allhead{ margin: 26px 0 12px; font-size: 16px; font-weight: 800; color: var(--rafina-text, #101828)} .rafina-pslider-section{ margin: 32px auto; direction: rtl} .rafina-pslider-header{ display: flex; justify-content: flex-start; margin-bottom: 18px} .rafina-pslider-header-group{ display: flex; align-items: center; gap: 14px} .rafina-pslider-icon{ width: 46px; height: 46px; border-radius: 14px; background: var(--rafina-panel); border: 1px solid var(--rafina-border-2); display: flex; align-items: center; justify-content: center; color: var(--rafina-accent-2, #19672a); flex-shrink: 0} .rafina-pslider-icon svg{ width: 22px; height: 22px} .rafina-pslider-header h2{ font-size: 19px; font-weight: 800; margin: 0 0 2px; color: var(--rafina-text)} .rafina-pslider-viewall{ font-size: 12px; color: var(--rafina-text-dimmer); text-decoration: none} .rafina-pslider-viewall:hover{ color: var(--rafina-accent-2)} .rafina-pslider-track{ display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: none; cursor: grab; user-select: none} .rafina-pslider-track, .rafina-pslider-track *{ cursor: grab} .rafina-pslider-track.is-grabbing, .rafina-pslider-track.is-grabbing *{ cursor: grabbing} .rafina-pslider-track::-webkit-scrollbar{ display: none} .rafina-pslide-card{ flex-shrink: 0; width: 185px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 22px; padding: 16px; text-decoration: none; color: inherit; position: relative; transition: box-shadow .2s ease, transform .2s ease} .rafina-pslide-card:hover{ box-shadow: 0 10px 24px rgba(20, 40, 25, .08); transform: translateY(-3px)} .rafina-pslide-card__image{ aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--rafina-bg-2, #eee); margin-bottom: 14px} .rafina-pslide-card__image img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; pointer-events: none} html[data-rafina-theme="dark"] .rafina-pslide-card__image img{ mix-blend-mode: normal} .rafina-pslide-card__title{ font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--rafina-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 36px} .rafina-pslide-card__bottom-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px} .rafina-pslide-card__price{ font-size: 14.5px; --rafina-price-color: var(--rafina-pslider-price-color, var(--rafina-text))} .rafina-pslide-card__rating{ display: flex; align-items: center; gap: 4px; background: var(--rafina-ghost-bg); border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--rafina-text-dim); flex-shrink: 0} .rafina-pslide-card__rating svg{ width: 13px; height: 13px; color: #f5b700} @media (max-width: 640px){ .rafina-pslide-card{ width: 150px; padding: 12px}} .rafina-pslide-card__image{ position: relative; overflow: visible} .rafina-pslide-card__image img{ border-radius: inherit} .rafina-pslide-card__cart-btn{ position: absolute; inset-inline-end: 8px; bottom: -8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: var(--rafina-accent-2, #19672a); color: #fff; box-shadow: 0 6px 14px rgba(25, 103, 42, .3); transition: transform .2s ease} .rafina-pslide-card__cart-btn:hover{ transform: scale(1.08)} .rafina-pslide-card__cart-btn:disabled{ opacity: .6; cursor: default} .rafina-pslide-card__cart-btn svg{ width: 17px; height: 17px} .rafina-pslider2-section{ margin: 32px auto; direction: rtl} .rafina-pslider2-header{ display: flex; justify-content: flex-start; margin-bottom: 18px} .rafina-pslider2-header-group{ display: flex; align-items: center; gap: 14px} .rafina-pslider2-icon{ width: 46px; height: 46px; border-radius: 14px; background: var(--rafina-panel); border: 1px solid var(--rafina-border-2); display: flex; align-items: center; justify-content: center; color: var(--rafina-accent-2, #19672a); flex-shrink: 0} .rafina-pslider2-icon svg{ width: 22px; height: 22px} .rafina-pslider2-header h2{ font-size: 19px; font-weight: 800; margin: 0 0 2px; color: var(--rafina-text)} .rafina-pslider2-viewall{ font-size: 12px; color: var(--rafina-text-dimmer); text-decoration: none} .rafina-pslider2-viewall:hover{ color: var(--rafina-accent-2)} .rafina-pslider2-track{ display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: none; cursor: grab; user-select: none} .rafina-pslider2-track, .rafina-pslider2-track *{ cursor: grab} .rafina-pslider2-track.is-grabbing, .rafina-pslider2-track.is-grabbing *{ cursor: grabbing} .rafina-pslider2-track::-webkit-scrollbar{ display: none} .rafina-pslide2-card{ flex-shrink: 0; width: 195px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 20px; padding: 14px; text-decoration: none; color: inherit; text-align: center; transition: box-shadow .2s ease, transform .2s ease} .rafina-pslide2-card:hover{ box-shadow: 0 10px 24px rgba(20, 40, 25, .08); transform: translateY(-3px)} .rafina-pslide2-card__image{ position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--rafina-bg-2, #eee); margin-bottom: 12px} .rafina-pslide2-card__image img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none} .rafina-pslide2-card__title{ font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--rafina-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 42px} .rafina-pslide2-card__bottom-row{ display: flex; align-items: center; justify-content: center; gap: 10px} .rafina-pslide2-card__price{ font-size: 14.5px; --rafina-price-color: var(--rafina-pslider2-price-color, var(--rafina-text))} .rafina-pslide2-card__rating{ display: flex; align-items: center; gap: 4px; background: var(--rafina-ghost-bg); border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--rafina-text-dim)} .rafina-pslide2-card__rating svg{ width: 13px; height: 13px; color: #f5b700} @media (max-width: 640px){ .rafina-pslide2-card{ width: 160px; padding: 10px}} .rafina-pslide2-card__image{ position: relative; overflow: visible} .rafina-pslide2-card__image img{ border-radius: inherit} .rafina-pslide2-card__cart-btn{ position: absolute; inset-inline-end: 8px; bottom: -8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: var(--rafina-accent-2, #19672a); color: #fff; box-shadow: 0 6px 14px rgba(25, 103, 42, .3); transition: transform .2s ease} .rafina-pslide2-card__cart-btn:hover{ transform: scale(1.08)} .rafina-pslide2-card__cart-btn:disabled{ opacity: .6; cursor: default} .rafina-pslide2-card__cart-btn svg{ width: 17px; height: 17px} .rafina-brandstrip-section{ margin-block: 34px} .rafina-brandstrip__head{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px} .rafina-brandstrip__icon{ width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; border: 1px solid var(--rafina-border); background: var(--rafina-panel); display: flex; align-items: center; justify-content: center; color: var(--rafina-accent-2, #19672a); font-size: 21px; line-height: 1} .rafina-brandstrip__icon svg{ width: 22px; height: 22px} .rafina-brandstrip__title{ margin: 0; font-size: 19px; font-weight: 800; color: var(--rafina-brandstrip-title, var(--rafina-text, #152018))} .rafina-brandstrip{ background: var(--rafina-brandstrip-bg, transparent); border-radius: 18px} .rafina-brandstrip__grid{ display: grid; grid-template-columns: repeat(var(--rafina-brandstrip-cols, 6), minmax(0, 1fr)); gap: var(--rafina-brandstrip-gap, 18px); align-items: center} .rafina-brandstrip__track{ display: flex; gap: var(--rafina-brandstrip-gap, 18px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px} .rafina-brandstrip__track::-webkit-scrollbar{ display: none} .rafina-brandstrip__track .rafina-brandstrip__item{ flex: 0 0 calc((100% - (var(--rafina-brandstrip-cols, 6) - 1) * var(--rafina-brandstrip-gap, 18px)) / var(--rafina-brandstrip-cols, 6)); scroll-snap-align: start} .rafina-brandstrip__item{ display: grid; place-items: center; min-height: calc(var(--rafina-brandstrip-size, 54px) + 14px); padding: 6px; border-radius: 12px; background: var(--rafina-brandstrip-item-bg, transparent)} .rafina-brandstrip__item img{ max-width: 100%; max-height: var(--rafina-brandstrip-size, 54px); width: auto; height: auto; object-fit: contain; transition: transform .18s ease, filter .18s ease, opacity .18s ease} .rafina-brandstrip__item:hover img{ transform: scale(1.05)} .rafina-brandstrip.is-gray .rafina-brandstrip__item img{ filter: grayscale(1); opacity: .7} .rafina-brandstrip.is-gray .rafina-brandstrip__item:hover img{ filter: none; opacity: 1} .rafina-brandstrip.is-boxed{ border: 1px solid var(--rafina-border, #e6e8ea); border-radius: 16px; background: var(--rafina-brandstrip-bg, var(--rafina-panel, #fff)); overflow: hidden} .rafina-brandstrip.is-boxed .rafina-brandstrip__grid{ gap: 0} .rafina-brandstrip.is-boxed .rafina-brandstrip__item{ border-radius: 0; background: transparent; padding: clamp(14px, 2.4vw, 26px) 12px; min-height: calc(var(--rafina-brandstrip-size, 54px) + 46px); outline: 1px solid var(--rafina-border, #e6e8ea); outline-offset: 0} @media (max-width: 900px){ .rafina-brandstrip__grid{ grid-template-columns: repeat(4, minmax(0, 1fr))} .rafina-brandstrip.is-boxed .rafina-brandstrip__grid{ grid-template-columns: repeat(3, minmax(0, 1fr))} .rafina-brandstrip__track .rafina-brandstrip__item{ flex-basis: 27%}} @media (max-width: 560px){ .rafina-brandstrip__grid{ grid-template-columns: repeat(3, minmax(0, 1fr))} .rafina-brandstrip.is-boxed .rafina-brandstrip__grid{ grid-template-columns: repeat(3, minmax(0, 1fr))} .rafina-brandstrip.is-boxed .rafina-brandstrip__item{ padding: 16px 8px} .rafina-brandstrip__track .rafina-brandstrip__item{ flex-basis: 36%} .rafina-brandstrip__item img{ max-height: calc(var(--rafina-brandstrip-size, 54px) * .8)}} .rafina-archive-wrap{ margin: 24px auto 60px; direction: rtl; font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif)} .rafina-breadcrumb{ font-size: 13px; color: var(--rafina-text-dimmer); margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px} .rafina-breadcrumb a{ color: var(--rafina-text-dim); text-decoration: none} .rafina-breadcrumb a:hover{ color: var(--rafina-accent-2)} .rafina-breadcrumb-current{ color: var(--rafina-text); font-weight: 600} .rafina-breadcrumb-sep{ opacity: .5} .rafina-archive-header{ display: flex; align-items: center; gap: 18px; margin-bottom: 20px} .rafina-archive-header__img{ width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--rafina-ghost-bg); flex-shrink: 0} .rafina-archive-header__img img{ width: 100%; height: 100%; object-fit: cover} .rafina-archive-header h1{ font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--rafina-text)} .rafina-archive-desc{ color: var(--rafina-text-dim); font-size: 13.5px; margin: 0 0 6px} .rafina-archive-count{ font-size: 12.5px; color: var(--rafina-text-dimmer)} .rafina-archive-sort{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px} .rafina-sort-pill{ padding: 8px 16px; border-radius: 999px; background: var(--rafina-panel); border: 1px solid var(--rafina-border-2); color: var(--rafina-text-dim); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease} .rafina-sort-pill:hover{ border-color: var(--rafina-accent-2)} .rafina-sort-pill.is-active{ background: var(--rafina-accent-2, #19672a); border-color: var(--rafina-accent-2, #19672a); color: #fff} @media (max-width: 900px){ .rafina-archive-sort{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 14px; padding-bottom: 2px} .rafina-archive-sort::-webkit-scrollbar{ display: none} .rafina-sort-pill{ flex: 0 0 auto; padding: 8px 14px}} .rafina-archive-layout{ display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start} .rafina-archive-layout[data-filters="left"]{ grid-template-columns: 1fr 240px} .rafina-archive-layout[data-filters="left"] > .rf-flt{ order: 2} .rafina-archive-layout[data-filters="left"] > .rafina-archive-main{ order: 1} .rafina-archive-sidebar{ background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; padding: 16px; position: sticky; top: 90px} .rafina-archive-sidebar h4{ margin: 0 0 10px; font-size: 14px; font-weight: 700} .rafina-sidebar-placeholder{ font-size: 12.5px; color: var(--rafina-text-dimmer); margin: 0} .rafina-archive-filter{ padding-top: 14px; border-top: 1px solid var(--rafina-border); margin-top: 14px} .rafina-archive-filter:first-of-type{ padding-top: 0; border-top: none; margin-top: 0} .rafina-archive-filter h5{ margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--rafina-text)} .rafina-archive-filter ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px} .rafina-archive-filter a{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-radius: 8px; text-decoration: none; font-size: 12.5px; color: var(--rafina-text-dim)} .rafina-archive-filter a:hover{ background: var(--rafina-ghost-bg); color: var(--rafina-text)} .rafina-archive-filter a span{ font-size: 11px; color: var(--rafina-text-dimmer)} @media (max-width: 900px){ .rafina-archive-layout, .rafina-archive-layout[data-filters="left"]{ grid-template-columns: 1fr} .rafina-archive-sidebar{ position: static; order: 2}} .rafina-product-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px} .rafina-product-card{ position: relative; background: var(--rafina-panel); border: 1px solid var(--rafina-border); border-radius: 16px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease} .rafina-product-card:hover{ box-shadow: 0 10px 24px rgba(20, 40, 25, 0.08); transform: translateY(-3px)} .rafina-product-card__link{ display: block; text-decoration: none; color: inherit} .rafina-product-card__image{ aspect-ratio: 1 / 1; background: var(--rafina-bg-2, #eee); display: flex; align-items: center; justify-content: center; overflow: hidden} .rafina-product-card__image img{ width: 100%; height: 100%; object-fit: cover} .rafina-product-card__placeholder{ font-size: 36px} .rafina-product-card__body{ padding: 12px 12px 0} .rafina-product-card__foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 12px} .rafina-product-card__title{ font-size: 13.5px; font-weight: 600; margin: 0 0 8px; color: var(--rafina-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4} .rafina-product-card__price{ font-size: 14.5px} .rafina-product-card__cart-btn{ flex: 0 0 38px; width: 38px; height: 38px; border: 0; cursor: pointer; border-radius: 12px; background: var(--rafina-accent-2, #19672a); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 6px 14px rgba(25, 103, 42, 0.3); transition: transform .2s ease} .rafina-product-card__cart-btn:hover{ transform: scale(1.08)} .rafina-product-card__cart-btn svg{ width: 17px; height: 17px} .rafina-archive-empty{ text-align: center; padding: 60px 20px; color: var(--rafina-text-dim); background: var(--rafina-panel); border-radius: 16px; border: 1px dashed var(--rafina-border-2)} .rafina-infinite-sentinel{ width: 100%; height: 1px} .rafina-infinite-status{ text-align: center; padding: 22px 0 6px; font-size: 13px; color: var(--rafina-muted, #7a7a7a)} .rafina-infinite-status.is-end{ font-size: 12.5px; opacity: .75} @media (max-width: 640px){ .rafina-product-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px}} .rafina-shopcats{ margin: 4px 0 22px} .rafina-shopcats__title{ margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--rafina-text)} .rafina-shopcats__row{ display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; margin: -6px -2px -10px; scrollbar-width: none} .rafina-shopcats__row::-webkit-scrollbar{ display: none} .rafina-shopcat{ position: relative; flex: 0 0 auto; width: var(--rafina-shopcat-w, 150px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 14px; background: var(--rafina-bg-2); border: 1px solid transparent; text-decoration: none; color: var(--rafina-text); transition: border-color .16s ease, background .16s ease, transform .16s ease} .rafina-shopcat:hover{ border-color: var(--rafina-accent-2, #19672a); background: var(--rafina-panel); transform: translateY(-2px)} .rafina-shopcat__img{ width: var(--rafina-shopcat-img, 74px); height: var(--rafina-shopcat-img, 74px); display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--rafina-panel)} .rafina-shopcat__img img{ width: 100%; height: 100%; object-fit: contain} .rafina-shopcat__ph{ width: 42%; height: 42%; border-radius: 8px; background: var(--rafina-border); opacity: .5} .rafina-shopcat__name{ font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden} .rafina-shopcat__count{ position: absolute; top: 8px; inset-inline-start: 8px; min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--rafina-panel); border: 1px solid var(--rafina-border); font-size: 11px; font-weight: 700; color: var(--rafina-text-dimmer); line-height: 1.7} .rafina-shopcat.is-more{ justify-content: center; font: inherit; cursor: pointer} .rafina-shopcat__more{ font-size: 26px; font-weight: 800; color: var(--rafina-accent-2, #19672a); line-height: 1.6} .rafina-shopcats__row{ scroll-behavior: smooth; scroll-snap-type: x proximity; touch-action: pan-x} .rafina-shopcat{ scroll-snap-align: start} .rafina-shopcats.is-open .rafina-shopcats__row{ cursor: grab; scroll-behavior: auto} .rafina-shopcats.is-dragging .rafina-shopcats__row{ cursor: grabbing; scroll-snap-type: none; user-select: none} .rafina-shopcats.is-dragging .rafina-shopcat{ pointer-events: none} .rafina-shopcats__toggle{ position: absolute; opacity: 0; pointer-events: none} .rafina-shopcats__toggle:not(:checked) ~ .rafina-shopcats__row .rafina-shopcat.is-extra{ display: none} .rafina-shopcats__toggle:checked ~ .rafina-shopcats__row .rafina-shopcat.is-more{ display: none} .rafina-shopcats.is-small{ --rafina-shopcat-w: 116px; --rafina-shopcat-img: 52px} .rafina-shopcats.is-medium{ --rafina-shopcat-w: 150px; --rafina-shopcat-img: 74px} .rafina-shopcats.is-large{ --rafina-shopcat-w: 190px; --rafina-shopcat-img: 104px} .rafina-shopcats.is-large .rafina-shopcat__name{ font-size: 13.5px} .rafina-shopcats.is-small .rafina-shopcat__name{ font-size: 12px} @media (max-width: 782px){ .rafina-shopcats.is-large{ --rafina-shopcat-w: 150px; --rafina-shopcat-img: 84px} .rafina-shopcats.is-medium{ --rafina-shopcat-w: 124px; --rafina-shopcat-img: 62px} .rafina-shopcats.is-small{ --rafina-shopcat-w: 100px; --rafina-shopcat-img: 46px} .rafina-shopcats__title{ font-size: 14px}}