/** * Shops Plugin styles. * * Scoped to the plugin namespace (.shops-plugin / .shops-drawer / * .shops-overlay). Drawers and overlays are moved to at runtime, so * the custom properties are also declared on those elements. * * Mandatory brand palette: * - Primary brand #AB020C * - Secondary #203446 * - Accent #F4C522 * - Neutral light #FFFCFA * - Neutral dark #333333 */ .shops-plugin, .shops-drawer, .shops-overlay, .shops-search-box { --shops-primary: #AB020C !important; --shops-secondary: #203446 !important; --shops-accent: #F4C522 !important; --shops-light: #FFFCFA !important; --shops-dark: #333333 !important; --shops-muted: #6B6760 !important; --shops-border: #E2DDD4 !important; --shops-soft: #F3F0EB !important; --shops-radius: 14px !important; --shops-font: inherit !important; --shops-shadow: 0 10px 30px rgba(16, 22, 31, 0.12) !important; } /* ------------------------------------------------------------------ * * Container safety * * The plugin is always a responsive child of the container it is placed * in (Elementor container / column, WordPress content, widget, template). * No fixed page width is imposed here: the Elementor Kit and its layout * remain the single source of truth for the available width. These rules * only stop a child from pushing its parent wider. * ------------------------------------------------------------------ */ .shops-plugin, .shops-search-box, .shops-archive__inner, .shops-drawer { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } .shops-plugin, .shops-search-box { width: 100% !important; overflow-wrap: anywhere !important; } .shops-plugin img, .shops-search-box img, .shops-archive__inner img { max-width: 100% !important; } .shops-list, .shops-toolbar, .shops-grid, .shops-grid-wrap, .shops-search, .shops-search__box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Standalone [plugin_search_box] shortcode */ .shops-search-box { direction: rtl !important; font-family: var(--shops-font) !important; color: var(--shops-dark) !important; -webkit-font-smoothing: antialiased !important; } .shops-search-box *, .shops-search-box *::before, .shops-search-box *::after { box-sizing: border-box !important; } .shops-search-box .shops-search { margin: 0 !important; } .shops-search--text .shops-search__box { display: flex !important; align-items: stretch !important; gap: 8px !important; } .shops-search--text .shops-search__input { padding-right: 16px !important; } .shops-search--text .shops-search__submit { position: absolute !important; transform: none !important; width: auto !important; height: auto !important; padding: 0 18px !important; border-radius: 12px !important; background: none !important; color: var(--shops-light) !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap !important; } /* ------------------------------------------------------------------ * * Base / RTL scope * ------------------------------------------------------------------ */ .shops-plugin { direction: rtl !important; -webkit-font-smoothing: antialiased !important; font-family: var(--shops-font) !important; color: var(--shops-dark) !important; line-height: 1.6 !important; } .shops-plugin *, .shops-plugin *::before, .shops-plugin *::after, .shops-drawer *, .shops-drawer *::before, .shops-drawer *::after { box-sizing: border-box !important; } .shops-plugin .screen-reader-text, .shops-drawer .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; } /* Focus states */ .shops-plugin a:focus-visible, .shops-plugin button:focus-visible, .shops-plugin input:focus-visible, .shops-plugin [tabindex]:focus-visible, .shops-drawer a:focus-visible, .shops-drawer button:focus-visible, .shops-drawer input:focus-visible, .shops-drawer [tabindex]:focus-visible { outline: 2px solid var(--shops-primary) !important; outline-offset: 2px !important; } .shops-plugin .shops-icon, .shops-search-box .shops-icon, .shops-drawer .shops-icon { display: inline-block !important; width: auto !important; height: auto !important; font-style: normal !important; line-height: 1 !important; flex: none !important; vertical-align: middle !important; } /* Inline-SVG fallback (only used when a logical icon has no Uicons mapping) */ .shops-plugin svg.shops-icon, .shops-search-box svg.shops-icon, .shops-drawer svg.shops-icon { width: 1em !important; height: 1em !important; } body.shops-scroll-lock, html.shops-scroll-lock { overflow: hidden !important; } /* ------------------------------------------------------------------ * * Toolbar: search + filters + chips + results * ------------------------------------------------------------------ */ .shops-search { margin: 0 0 14px !important; } .shops-search__box { position: relative !important; } .shops-search__input { width: 100% !important; padding: 12px 44px 12px 16px !important; border: 1px solid var(--shops-border) !important; border-radius: 12px !important; /*background: var(--shops-light) !important;*/ color: var(--shops-dark) !important; font-size: 14px !important; font-family: inherit !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; outline: none !important; } .shops-search__input::placeholder { color: #9A948A !important; } /*.shops-search__input:focus {*/ /* outline: none !important;*/ /* border-color: var(--shops-primary) !important;*/ /*}*/ .shops-search__submit { position: absolute !important; top: 50% !important; right: 8px !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: none !important; background: transparent !important; color: #333333 !important; cursor: pointer !important; border-radius: 8px !important; } .shops-search__submit .shops-icon { font-size: 20px !important; color: #333333 !important; display: block !important; } .shops-search__submit:hover .shops-icon { color: #333 !important; } .shops-search__submit:hover { color: white !important; } .shops-search__submit .shops-icon { font-size: 20px !important; color: #333333 !important; } button.shops-search__submit { background: none !important; } .shops-search__submit, button.shops-search__submit[type="submit"] { background-color: transparent !important; color: #333 !important; /* رنگ آیکون */ border: none !important; box-shadow: none !important; padding: 0 !important; } .shops-search__submit:hover { background-color: transparent !important; color: #ab020c !important; /* مثلا رنگ آیکون در حالت هاور */ } .shops-search__submit:hover, button.shops-search__submit[type="submit"]:hover { background-color: transparent !important; color: #ab020c !important; /* رنگ آیکون در هاور (اختیاری) */ box-shadow: none !important; border: none !important; } .shops-filterbar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 0 10px !important; } .shops-filter-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-width: 0 !important; padding: 10px 12px !important; border: 1px solid var(--shops-border) !important; border-radius: 10px !important; background: var(--shops-light) !important; color: var(--shops-dark) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .shops-filter-btn .shops-icon { font-size: 17px !important; color: var(--shops-secondary) !important; transition: color 0.15s ease !important; } .shops-filter-btn__label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .shops-filter-btn__chevron { font-size: 14px !important; color: var(--shops-muted) !important; margin-inline-start: auto !important; } .shops-filter-btn:hover { border-color: var(--shops-primary) !important; } .shops-filter-btn.is-active { background: var(--shops-primary) !important; border-color: var(--shops-primary) !important; color: var(--shops-light) !important; } .shops-filter-btn.is-active .shops-icon { color: var(--shops-light) !important; } .shops-filter-btn[aria-expanded="true"] .shops-filter-btn__chevron { transform: rotate(180deg) !important; } .shops-chips { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 4px 0 10px !important; } .shops-chips[hidden] { display: none !important; } .shops-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; border: 1px solid var(--shops-border) !important; border-radius: 999px !important; background: var(--shops-soft) !important; color: var(--shops-dark) !important; font-family: inherit !important; font-size: 13px !important; cursor: pointer !important; transition: border-color 0.15s ease, background 0.15s ease !important; } .shops-chip:hover { border-color: var(--shops-primary) !important; background: #F6EEED !important; } .shops-chip__x { display: inline-flex !important; font-size: 14px !important; color: var(--shops-muted) !important; } .shops-chip--clear { background: var(--shops-primary) !important; border-color: var(--shops-primary) !important; color: var(--shops-light) !important; font-weight: 700 !important; } .shops-chip--clear:hover { background: #8E020A !important; } .shops-chip--small { padding: 4px 10px !important; font-size: 12px !important; } .shops-results { margin: 0 0 16px !important; font-size: 13px !important; color: var(--shops-muted) !important; } /* ------------------------------------------------------------------ * * Grid + cards * ------------------------------------------------------------------ */ .shops-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; } .shops-grid-wrap { position: relative !important; /* The hover pop-out may visually extend past the card, but it must never make the page horizontally scrollable. `clip` (not `hidden`) contains that ink without turning the wrapper into a scroll box and without clipping the vertical pop-out. */ overflow-x: clip !important; overflow-y: visible !important; } .shops-grid-wrap.is-loading .shops-grid { opacity: 0.45 !important; pointer-events: none !important; } .shops-grid-wrap.is-loading .shops-loader { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; background: rgba(255, 252, 250, 0.6) !important; } /* Store cards are intentionally static: normal, :hover, :active and :focus render identically, with no transition, transform, shadow, colour or overlay changes. */ .shops-card { margin: 0 !important; border-radius: var(--shops-radius) !important; background: var(--shops-light) !important; box-shadow: 0 2px 10px rgba(16, 22, 31, 0.06) !important; overflow: visible !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } .shops-card__action { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; background: none !important; cursor: pointer !important; text-align: center !important; font-family: inherit !important; color: inherit !important; } .shops-card__media { position: relative !important; display: block !important; aspect-ratio: 4 / 3 !important; background: linear-gradient(135deg, #E8E3DA, #D6D0C6) !important; overflow: visible !important; border-radius: var(--shops-radius) var(--shops-radius) 0 0 !important; } .shops-card__bg { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; border-radius: var(--shops-radius) var(--shops-radius) 0 0 !important; } .shops-card__logo { position: absolute !important; bottom: -28px !important; right: 50% !important; transform: translateX(50%) !important; width: 80px !important; height: 80px !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; background: var(--shops-light) !important; border: 3px solid var(--shops-light) !important; box-shadow: 0 3px 10px rgba(16, 22, 31, 0.18) !important; overflow: hidden !important; padding: 6px; } .shops-card__logo-img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } .shops-card__body { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 36px 12px 14px !important; } .shops-card__title { font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--shops-dark) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .shops-badge { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.5 !important; white-space: nowrap !important; } .shops-badge--category { background: #e2ddd4 !important; color: var(--shops-dark) !important; line-height: 1.5rem !important; } .shops-badge--type { background: var(--shops-secondary) !important; color: var(--shops-light) !important; } .shops-badge--in-person, .shops-badge--online, .shops-badge--hybrid { background: #e2ddd4 !important; color: #333 !important; line-height: 1.5rem !important; } /* ------------------------------------------------------------------ * * Loader / end / empty * ------------------------------------------------------------------ */ .shops-loader { display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px 0 !important; } .shops-loader[hidden] { display: none !important; } .shops-spinner { display: inline-block !important; width: 34px !important; height: 34px !important; border: 3px solid #E4DFD6 !important; border-top-color: var(--shops-primary) !important; border-radius: 50% !important; animation: shops-spin 0.8s linear infinite !important; } @keyframes shops-spin { to { transform: rotate(360deg) !important; } } .shops-end { padding: 14px 0 4px !important; text-align: center !important; font-size: 13px !important; color: var(--shops-muted) !important; } .shops-end[hidden] { display: none !important; } .shops-sentinel { height: 1px !important; } .shops-empty { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; padding: 64px 16px !important; text-align: center !important; color: var(--shops-muted) !important; } .shops-empty__icon { font-size: 46px !important; color: #C9C4BC !important; } .shops-empty__text { margin: 0 !important; font-size: 14px !important; } /* ------------------------------------------------------------------ * * Drawers (shared) * ------------------------------------------------------------------ */ .shops-drawer[hidden], .shops-overlay[hidden] { display: none !important; } .shops-overlay { position: fixed !important; inset: 0 !important; z-index: 99998 !important; background: rgba(13, 18, 27, 0.55) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.18s ease, visibility 0.18s ease !important; } .shops-overlay.is-open { opacity: 1 !important; visibility: visible !important; } .shops-drawer { position: fixed !important; z-index: 99999 !important; display: flex !important; flex-direction: column !important; background: var(--shops-light) !important; color: var(--shops-dark) !important; box-shadow: var(--shops-shadow) !important; font-family: var(--shops-font) !important; direction: rtl !important; } /* Desktop / tablet: right side panel */ .shops-drawer--filter, .shops-drawer--detail { top: 0 !important; bottom: 0 !important; right: 0 !important; width: min(320px, 92vw) !important; transform: translateX(100%) !important; transition: transform 0.25s ease !important; } .shops-drawer--filter.is-open, .shops-drawer--detail.is-open { transform: translateX(0) !important; } .shops-drawer__head { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 16px !important; border-bottom: 1px solid var(--shops-border) !important; flex: none !important; } .shops-drawer__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 19px !important; color: var(--shops-primary) !important; } .shops-drawer__icon .shops-icon { font-size: 19px !important; } .shops-drawer__title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--shops-dark) !important; flex: 1 !important; } .shops-drawer__close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; flex: none !important; border: none !important; border-radius: 8px !important; background: transparent !important; color: var(--shops-muted) !important; cursor: pointer !important; font-size: 20px !important; } .shops-drawer__close:hover { background: var(--shops-soft) !important; color: var(--shops-primary) !important; } .shops-drawer__content { flex: 1 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } .shops-drawer__footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px 16px !important; border-top: 1px solid var(--shops-border) !important; flex: none !important; } .shops-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 16px !important; border: 1px solid transparent !important; border-radius: 10px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; } .shops-btn--primary { background: var(--shops-primary) !important; color: var(--shops-light) !important; } .shops-btn--primary:hover { background: #8E020A !important; } .shops-btn--ghost { background: transparent !important; border-color: var(--shops-border) !important; color: var(--shops-dark) !important; } .shops-btn--ghost:hover { border-color: var(--shops-primary) !important; color: var(--shops-primary) !important; } /* ------------------------------------------------------------------ * * Filter views * ------------------------------------------------------------------ */ .shops-filter-view { padding: 4px 0 8px !important; } .shops-filter-row { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 50px !important; padding: 0 16px !important; border-bottom: 1px solid #EFECE7 !important; cursor: pointer !important; font-size: 14px !important; } .shops-filter-row:last-child { border-bottom: none !important; } .shops-filter-row input[type="checkbox"], .shops-filter-row input[type="radio"] { width: 20px !important; height: 20px !important; flex: none !important; margin: 0 !important; cursor: pointer !important; accent-color: var(--shops-primary) !important; } .shops-filter-row__label { flex: 1 !important; line-height: 1.4 !important; } .shops-filter-row--child { padding-inline-start: 48px !important; min-height: 44px !important; } .shops-filter-row__inner { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 !important; cursor: pointer !important; min-height: 50px !important; } .shops-filter-empty { padding: 24px 16px !important; text-align: center !important; color: var(--shops-muted) !important; font-size: 13px !important; } /* City tree */ .shops-filter-search { padding: 12px 16px 4px !important; } .shops-filter-search__input { width: 100% !important; padding: 10px 14px !important; border: 1px solid var(--shops-border) !important; border-radius: 10px !important; background: var(--shops-light) !important; font-family: inherit !important; font-size: 13.5px !important; color: var(--shops-dark) !important; } .shops-filter-search__input:focus { outline: none !important; border-color: var(--shops-primary) !important; box-shadow: 0 0 0 3px rgba(171, 2, 12, 0.12) !important; } .shops-filter-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 10px 16px 2px !important; } .shops-filter-clearall { padding: 4px 10px !important; border: 1px solid var(--shops-border) !important; border-radius: 999px !important; background: transparent !important; font-family: inherit !important; font-size: 12px !important; color: var(--shops-muted) !important; cursor: pointer !important; } .shops-filter-clearall:hover { border-color: var(--shops-primary) !important; color: var(--shops-primary) !important; } .shops-city-tree { padding-bottom: 8px !important; } .shops-city-group.is-filtered { display: none !important; } .shops-city-group__head { display: flex !important; align-items: center !important; gap: 8px !important; } .shops-city-group__toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex: none !important; border: none !important; border-radius: 6px !important; background: transparent !important; color: var(--shops-muted) !important; cursor: pointer !important; font-size: 16px !important; transition: transform 0.2s ease !important; } .shops-city-group__toggle:hover { background: var(--shops-soft) !important; } .shops-city-group.is-open .shops-city-group__toggle .shops-icon { transform: rotate(180deg) !important; } .shops-city-group__children { display: none !important; } .shops-city-group.is-open .shops-city-group__children { display: block !important; } /* ------------------------------------------------------------------ * * Detail drawer * ------------------------------------------------------------------ */ .shops-detail { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; } @media(max-width:767px){ .shops-detail{ border-radius: 18px 18px 0px 0px; } } .shops-detail__loading, .shops-detail__error { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 60px 16px !important; color: var(--shops-muted) !important; font-size: 14px !important; } .shops-detail__cover-wrap { flex: none !important; } .shops-detail__cover { position: relative !important; height: 150px !important; background: linear-gradient(135deg, #E8E3DA, #D6D0C6) !important; overflow: hidden !important; } .shops-detail__cover--compact { height: 84px !important; } .shops-detail__cover-bg { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; } .shops-detail__cover::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(16, 22, 31, 0.05), rgba(16, 22, 31, 0.28)) !important; } .shops-drawer__close--cover { font-size: 14px !important; position: absolute !important; top: 12px !important; right: 12px !important; z-index: 2 !important; background: rgba(255, 252, 250, 0.92) !important; color: var(--shops-dark) !important; box-shadow: 0 2px 8px rgba(16, 22, 31, 0.16) !important; } .shops-detail__identity { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 10px 16px 14px !important; text-align: center !important; } .shops-detail__identity--with-logo { padding-top: 0 !important; } .shops-detail__logo { width: 76px !important; height: 76px !important; margin-top: -38px !important; margin-bottom: 2px !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; background: var(--shops-light) !important; border: 4px solid var(--shops-light) !important; box-shadow: 0 4px 12px rgba(16, 22, 31, 0.2) !important; overflow: hidden !important; padding: 6px !important; } .shops-detail__logo-img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } .shops-detail__name { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--shops-dark) !important; } .shops-detail__badges { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } /* Tabs */ .shops-detail__tabs { flex: none !important; padding: 0 12px !important; border-bottom: 1px solid var(--shops-border) !important; } .shops-tabs { display: flex !important; align-items: stretch !important; overflow-x: auto !important; } .shops-tab { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 12px 14px !important; border: none !important; background: transparent !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--shops-muted) !important; cursor: pointer !important; white-space: nowrap !important; } .shops-tab::after { content: "" !important; position: absolute !important; right: 12px !important; left: 12px !important; bottom: 0 !important; height: 2px !important; background: transparent !important; border-radius: 2px !important; } .shops-tab:hover { color: var(--shops-primary) !important; } .shops-tab.is-active { color: var(--shops-primary) !important; font-weight: 700 !important; } .shops-tab.is-active::after { background: var(--shops-primary) !important; } .shops-tab__count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: auto !important; padding: 3 10px !important; border-radius: 999px !important; background: var(--shops-accent) !important; color: var(--shops-dark) !important; font-size: 11px !important; font-weight: 700 !important; } /* Panels */ .shops-detail__content { flex: 1 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; padding: 18px 24px !important; } .shops-js .shops-tabpanel { display: none !important; } .shops-js .shops-tabpanel.is-active { display: block !important; } .shops-tabpanel[hidden] { display: none !important; } .shops-detail__none { margin: 0 !important; text-align: center !important; color: var(--shops-muted) !important; font-size: 13px !important; padding: 30px 0 !important; } /* About */ .shops-about { color: var(--shops-dark) !important; text-align: justify !important; } .shops-about p { margin: 0 0 14px !important; font-size: 14px; } .shops-about img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; } /* ------------------------------------------------------------------ * * Branches * ------------------------------------------------------------------ */ .shops-branches__search { margin-bottom: 14px !important; } .shops-branches__search-box { position: relative !important; } .shops-branches__search-input { width: 100% !important; padding: 10px 40px 10px 14px !important; border: 1px solid var(--shops-border) !important; border-radius: 10px !important; background: var(--shops-light) !important; font-family: inherit !important; font-size: 13.5px !important; color: var(--shops-dark) !important; } .shops-branches__search-box .shops-icon { position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; font-size: 17px !important; color: var(--shops-muted) !important; width: auto !important; } .shops-branches__search-input:focus { outline: none !important; /*border-color: var(--shops-primary) !important;*/ /*box-shadow: 0 0 0 3px rgba(171, 2, 12, 0.12) !important;*/ } .shops-branches__empty { padding: 20px 0 !important; text-align: center !important; color: var(--shops-muted) !important; font-size: 13px !important; } .shops-branch { margin: 0 0 12px !important; border: 1px solid var(--shops-border) !important; border-radius: 12px !important; background: var(--shops-light) !important; overflow: hidden !important; } .shops-branch__head { padding: 14px 16px 10px !important; } .shops-branch__title-line { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; justify-content: space-between; } .shops-branch__name { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--shops-dark) !important; } .shops-branch__city { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 999px !important; background: var(--shops-accent) !important; color: var(--shops-dark) !important; font-size: 12px !important; font-weight: 700 !important; } .shops-branch__address { margin: 6px 0 0 !important; font-size: 12.5px !important; line-height: 1.8 !important; color: var(--shops-muted) !important; } .shops-branch__actions { display: flex !important; align-items: center !important; gap: 4px !important; padding: 6px 10px !important; border-top: 1px solid #EFECE7 !important; } .shops-branch__action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: none !important; border-radius: 8px !important; background: transparent !important; color: var(--shops-secondary) !important; cursor: pointer !important; font-size: 19px !important; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .shops-branch__action:hover { background: var(--shops-soft) !important; color: var(--shops-primary) !important; } .shops-branch__action--static { cursor: default !important; color: var(--shops-muted) !important; } .shops-branch__action--expand { margin-inline-start: auto !important; transition: transform 0.2s ease !important; } .shops-branch.is-open .shops-branch__action--expand .shops-icon { transform: rotate(180deg) !important; } .shops-branch__hours { border-top: 1px solid #EFECE7 !important; } .shops-branch__hours-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .shops-branch__hours-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 16px !important; border-top: 1px solid #F4F1EC !important; font-size: 13px !important; } .shops-branch__hours-row:first-child { border-top: none !important; } .shops-branch__hours-day { color: var(--shops-muted) !important; } .shops-branch__hours-time { color: var(--shops-dark) !important; font-weight: 600 !important; } /* ------------------------------------------------------------------ * * Purchase guide * ------------------------------------------------------------------ */ .shops-guide__section { margin-bottom: 22px !important; } .shops-guide__section:last-child { margin-bottom: 0 !important; } .shops-guide__banner { margin: 0 0 14px !important; padding: 12px 14px !important; border-radius: 10px !important; background: #e2ddd4 !important; color: #ab020c !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; } .shops-guide__list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .shops-guide__item { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 6px 0 14px !important; } .shops-guide__marker { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex: none !important; border-radius: 50% !important; background: var(--shops-accent) !important; color: var(--shops-dark) !important; font-size: 13px !important; font-weight: 700 !important; } .shops-guide__item-body { flex: 1 !important; min-width: 0 !important; } .shops-guide__item-title { margin: 0 0 4px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--shops-dark) !important; } .shops-guide__item-desc { margin: 0 !important; font-size: 12.5px !important; line-height: 1.9 !important; color: var(--shops-muted) !important; } /* ------------------------------------------------------------------ * * Online actions bar * ------------------------------------------------------------------ */ .shops-online-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 16px !important; background: var(--shops-secondary) !important; color: var(--shops-light) !important; flex: none !important; } .shops-online-bar__text { font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .shops-online-bar__actions { display: flex !important; align-items: center !important; gap: 8px !important; } .shops-online-bar__action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255, 252, 250, 0.14) !important; color: var(--shops-light) !important; font-size: 19px !important; text-decoration: none !important; transition: background 0.15s ease !important; } .shops-online-bar__action:hover { background: rgba(255, 252, 250, 0.26) !important; } /* ------------------------------------------------------------------ * * Archives * ------------------------------------------------------------------ */ .shops-archive__inner { max-width: 100%; margin-inline: 0 !important; /* No inline padding: the archive sits inside Elementor's own container (.e-con-inner) and must align with the main Shop page's content edges. */ padding: 24px 0; width: 100%; box-sizing: border-box; } /* * The archive reuses Elementor's own container markup (.e-con / .e-con-inner) * so it inherits the Kit/container width. Elementor normally writes the * --display variable per element in its generated CSS; because this container * is rendered by the plugin, provide only that variable here. No width, * max-width or container value is defined by the plugin. */ .shops-archive > .e-con { --display: flex; } .shops-archive-head { /*margin-bottom: 20px !important;*/ display: none !important; } .shops-archive-title { margin: 0 !important; font-size: 22px !important; font-weight: 800 !important; color: var(--shops-dark) !important; } .shops-archive-desc { margin-top: 6px !important; font-size: 13.5px !important; color: var(--shops-muted) !important; } /* ------------------------------------------------------------------ * * Responsive * ------------------------------------------------------------------ */ @media (max-width: 640px) { .shops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .shops-filterbar { gap: 8px !important; } .shops-filter-btn { padding: 9px 8px !important; font-size: 12px !important; gap: 5px !important; } .shops-filter-btn .shops-icon { font-size: 15px !important; } .shops-filter-btn__chevron { display: none !important; } .shops-card__body { padding: 30px 8px 10px !important; gap: 6px !important; } .shops-card__title { font-size: 13px !important; } .shops-card__logo { width: 46px !important; height: 46px !important; bottom: -23px !important; border-width: 2px !important; } .shops-badge { padding: 2px 8px !important; font-size: 10.5px !important; } /* Bottom-sheet drawers on mobile */ .shops-drawer--filter, .shops-drawer--detail { top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; max-height: 90vh !important; max-height: 90dvh !important; border-radius: 18px 18px 0 0 !important; transform: translateY(100%) !important; } .shops-drawer--filter.is-open, .shops-drawer--detail.is-open { transform: translateY(0) !important; } .shops-detail__cover { height: 120px !important; } .shops-detail__cover--compact { height: 72px !important; } .shops-detail__logo { width: 66px !important; height: 66px !important; margin-top: -33px !important; border-width: 3px !important; } .shops-detail__content { padding: 16px 14px !important; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; } .shops-online-bar { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; } } @media (prefers-reduced-motion: reduce) { .shops-spinner, .shops-filter-btn__chevron, .shops-branch__action--expand .shops-icon, .shops-drawer, .shops-overlay { transition: none !important; animation-duration: 1.4s !important; } } .shops-plugin a:focus-visible, .shops-plugin button:focus-visible, .shops-plugin input:focus-visible, .shops-plugin [tabindex]:focus-visible, .shops-drawer a:focus-visible, .shops-drawer button:focus-visible, .shops-drawer input:focus-visible, .shops-drawer [tabindex]:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------------------ * * Empty state — centered across the whole grid * ------------------------------------------------------------------ */ .shops-grid .shops-empty { grid-column: 1 / -1 !important; /* تمام ستون‌های گرید رو بگیر */ width: 100% !important; min-height: 280px !important; /* اختیاری: ارتفاع مناسب */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 64px 16px !important; margin: 0 auto !important; color: var(--shops-muted) !important; } .shops-grid .shops-empty__icon { width: auto !important; height: auto !important; font-size: 56px !important; line-height: 1 !important; color: #C9C4BC !important; margin-bottom: 12px !important; } .shops-grid .shops-empty__text { margin: 0 !important; font-size: 14px !important; line-height: 1.8 !important; text-align: center !important; } .e-con.e-con-boxed.e-flex.e-parent.e-lazyloaded { width: 100% !important; max-width: 90% !important; display: flex; justify-content: center; justify-items: center; justify-self: center; }