/* Storefront canvas: the warm page colour behind every storefront page; cards, forms and panels stay white on it. */ body.zph-site { --zs-canvas: #fbf7ef; --zs-frame: #f3ecdf; background-color: var(--zs-canvas); } body.zph-site :is(.website-wrapper, .main-page-wrapper) { background-color: var(--zs-canvas); } /* Site-wide store header: glass controls in the hero's umber and logo gold. Floats over the homepage campaign; inner pages pin it as a solid bar (css/site.css). */ @font-face { font-family: "ZPH Persian"; src: url("../fonts/woff2/IRANSansWeb.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "ZPH Persian"; src: url("../fonts/woff2/IRANSansWeb_Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: "ZPH Persian"; src: url("../fonts/woff2/IRANSansWeb_Black.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: swap; } .zph-site .elementor-location-header { position: absolute; inset-block-start: var(--wp-admin--admin-bar--height, 0px); inset-inline: 0; z-index: 40; /* Zoom-adaptive: browser zoom narrows the CSS viewport, so the logo, search and gaps scale with vw and the menu sizes its text to its own column (container query below). Before, everything kept its 1920px size until 1199px and the menu spilled over the logo and search at 110-150% zoom. */ --hdr-logo: clamp(120px, 10.5vw, 176px); --hdr-search: clamp(160px, 16vw, 300px); display: grid; grid-template-areas: "brand navigation search actions"; grid-template-columns: var(--hdr-logo) minmax(0, 1fr) var(--hdr-search) auto; align-items: center; gap: clamp(12px, 1.4vw, 24px); inline-size: 100%; padding: 26px clamp(24px, 4vw, 72px); border: 0; background: linear-gradient(180deg, #17110acc, #17110a00); color: #fff; font-family: "ZPH Persian", Tahoma, sans-serif; } .zph-site .elementor-location-header::before, .zph-site .elementor-location-header::after { display: none; } .zph-site .elementor-location-header .zph-header-main, .zph-site .elementor-location-header .zph-header-brand, .zph-site .zph-header-brand > .e-con-inner { display: contents; } .zph-site .zph-header-main::before, .zph-site .zph-header-main::after, .zph-site .zph-header-brand::before, .zph-site .zph-header-brand::after, .zph-site .zph-header-brand > .e-con-inner::before, .zph-site .zph-header-brand > .e-con-inner::after { display: none; } .zph-site .zph-header-brand .elementor-widget-theme-site-logo { grid-area: brand; inline-size: var(--hdr-logo); max-inline-size: var(--hdr-logo); margin: 0; padding: 0; } .zph-site .zph-header-brand .elementor-widget-theme-site-logo a { display: flex; align-items: center; min-block-size: 44px; } .zph-site .zph-header-brand .elementor-widget-theme-site-logo img { display: block; inline-size: var(--hdr-logo); block-size: auto; object-fit: contain; filter: drop-shadow(0 4px 14px #00000066); } /* ---------- header controls: one glass family in the hero's umber and logo gold ---------- */ .zph-site .elementor-location-header { --hdr-glass: #17110a73; --hdr-glass-strong: #17110ae6; --hdr-line: #f0d68c47; --hdr-gold: #d8a51d; --hdr-gold-pale: #f0d68c; --hdr-ivory: #fbf5e9; } /* Search: a pill with a gold round submit; widens and lights gold on focus. */ .zph-site .zph-header-brand .elementor-widget-search { grid-area: search; inline-size: 100%; min-inline-size: 0; max-inline-size: none; margin: 0; padding: 0; --e-search-submit-margin-inline-start: 0px; transition: max-inline-size 260ms cubic-bezier(.2, .7, .2, 1), min-inline-size 260ms cubic-bezier(.2, .7, .2, 1); } .zph-site .elementor-location-header .zph-header-brand .elementor-widget-search { background: transparent !important; border-radius: 999px; } .zph-site .zph-header-brand .e-search { display: block; } .zph-site .zph-header-brand .e-search-form { display: flex; align-items: center; gap: 4px; min-block-size: 48px; padding: 4px; border: 1px solid var(--hdr-line); border-radius: 999px; background: var(--hdr-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 #fbf5e914, 0 10px 30px -14px #000a; overflow: visible; transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .zph-site .zph-header-brand .e-search-form:hover { border-color: #f0d68c80; } .zph-site .elementor-location-header .zph-header-brand .elementor-widget-search .e-search-input-wrapper { flex: 1; min-inline-size: 0; block-size: 38px; min-block-size: 0; } .zph-site .elementor-location-header .zph-header-brand .e-search-input { inline-size: 100%; min-inline-size: 0; block-size: 38px; min-block-size: 0; margin: 0; padding: 0 14px 0 6px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent !important; color: var(--hdr-ivory) !important; direction: rtl; text-align: right; font: 400 15px/38px "ZPH Persian", Tahoma, sans-serif; } .zph-site .zph-header-brand .e-search-input::placeholder { color: #fbf5e9a6; opacity: 1; transition: color 200ms ease; } .zph-site .zph-header-brand .e-search-input::-webkit-search-cancel-button { filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); cursor: pointer; } .zph-site .elementor-location-header .zph-header-brand .elementor-widget-search .e-search-submit { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; min-inline-size: 0; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(180deg, #e6b73c, var(--hdr-gold) 55%, #c4921a) !important; box-shadow: 0 6px 16px -6px #d8a51daa, inset 0 1px 0 #fff6d466; color: #1d1407 !important; cursor: pointer; transition: transform 200ms ease, filter 200ms ease; } .zph-site .zph-header-brand .e-search-submit:hover { filter: brightness(1.08); transform: scale(1.06); } .zph-site .zph-header-brand .e-search-submit svg { inline-size: 15px; block-size: 15px; fill: currentColor; } .zph-site .elementor-location-header .zph-header-brand .zph-site .elementor-location-header .zph-header-brand .elementor-widget-search:focus-within .e-search-form { border-color: var(--hdr-gold); background: var(--hdr-glass-strong); box-shadow: 0 0 0 4px #d8a51d2e, 0 16px 36px -14px #000c; } .zph-site .zph-header-brand .elementor-widget-search:focus-within .e-search-input::placeholder { color: #fbf5e973; } .zph-site .elementor-location-header .zph-header-brand .e-search-input:focus-visible { outline: 0; } .zph-site .zph-header-brand .e-search-results-container { max-inline-size: min(90vw, 420px); margin-block-start: 8px; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -20px #17110a99; overflow: hidden; color: #29251f; } .zph-site .zph-header-brand .e-search-results-container:has(> .e-search-results:empty) { display: none; } /* Account and cart: round glass buttons; the cart count is a gold badge that hides when empty. */ .zph-site .elementor-location-header .zph-header-actions { grid-area: actions; inline-size: auto; max-inline-size: none; margin: 0; padding: 0; } .zph-site .zph-header-actions > .e-con-inner { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; inline-size: auto; padding: 0; margin: 0; } .zph-site .zph-header-actions .elementor-widget { inline-size: auto; max-inline-size: none; margin: 0; padding: 0; } .zph-site .zph-header-support, .zph-site .zph-header-decoration { display: none; } .zph-site .elementor-location-header .zph-header-actions .elementor-widget .elementor-button:not(.elementor-menu-cart__container *), .zph-site .elementor-location-header .elementor-menu-toggle { position: relative; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; min-inline-size: 0; min-block-size: 0; margin: 0; padding: 0; border: 1px solid var(--hdr-line); border-radius: 50%; background: var(--hdr-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 #fbf5e914, 0 10px 30px -14px #000a; color: var(--hdr-ivory); transform: none; transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease, transform 220ms cubic-bezier(.2, .7, .2, 1); } .zph-site .elementor-location-header .zph-header-actions .elementor-widget .elementor-button:not(.elementor-menu-cart__container *) { display: inline-flex; } .zph-site .elementor-location-header .zph-header-actions .elementor-widget .elementor-button:not(.elementor-menu-cart__container *):hover, .zph-site .elementor-location-header .elementor-menu-toggle:hover { border-color: var(--hdr-gold); background: var(--hdr-glass-strong); color: var(--hdr-gold-pale); transform: translateY(-2px); } .zph-site .elementor-location-header .zph-header-actions .elementor-widget .elementor-button:not(.elementor-menu-cart__container *):active { transform: translateY(0) scale(.95); } .zph-site .elementor-location-header .zph-header-actions .elementor-button-content-wrapper { display: contents; } .zph-site .zph-header-actions .elementor-button-text:not(.elementor-menu-cart__container *) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .zph-site .elementor-location-header .zph-header-actions .elementor-button-icon { position: static; display: inline-flex; align-items: center; justify-content: center; margin: 0; color: inherit; font-size: 18px; } .zph-site .elementor-location-header .zph-header-actions .elementor-button-icon svg { inline-size: 18px; block-size: 18px; fill: currentColor; } .zph-site .elementor-location-header .zph-header-actions .elementor-button-icon-qty { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 20px; block-size: 20px; margin: 0; padding: 0 5px; border: 2px solid #17110a; border-radius: 999px; background: var(--hdr-gold); color: #1d1407; font: 700 11px/1 "ZPH Persian", Tahoma, sans-serif; transform: none; } .zph-site .elementor-location-header .zph-header-actions .elementor-button-icon-qty[data-counter="0"] { display: none; } .zph-site .elementor-location-header .zph-header-navigation { grid-area: navigation; position: static; inline-size: auto; max-inline-size: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; } .zph-site .zph-header-navigation .zph-header-nav-inner { position: static; display: block; inline-size: 100%; padding: 0; } .zph-site .zph-header-navigation .elementor-widget-nav-menu { position: static; inline-size: 100%; max-inline-size: none; margin: 0; } .zph-site .zph-header-navigation .elementor-widget-social-icons { display: none; } .zph-site .zph-header-navigation .elementor-nav-menu--main > .elementor-nav-menu { display: flex; flex-wrap: nowrap; justify-content: center; } .zph-site .zph-header-navigation .elementor-nav-menu--main { justify-content: center; } .zph-site .zph-header-navigation .elementor-nav-menu--main > .elementor-nav-menu { inline-size: 100%; gap: clamp(8px, 1.2vw, 28px); } .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .elementor-item { min-block-size: 44px; padding: 10px 0; color: #fff; background: transparent; font-family: inherit; font-size: 16px; font-size: clamp(12px, 2.4cqi, 16px); font-weight: 700; white-space: nowrap; } .zph-site .zph-header-navigation .elementor-nav-menu--main .elementor-item:hover { opacity: .8; } .zph-site .zph-header-navigation .elementor-nav-menu--main .sub-menu { border: 1px solid #f0d68c33; border-radius: 14px; background: #1f170dee; } .zph-site .zph-header-navigation .elementor-nav-menu--main .elementor-sub-item { color: #fff; font-family: "ZPH Persian", Tahoma, sans-serif; } .zph-site .zph-header-navigation .sub-arrow svg { fill: currentColor; } .zph-site .elementor-location-header :is(a, button, input, [tabindex]):focus-visible { outline: 2px solid #f0d68c; outline-offset: 3px; } .zph-site .elementor-location-header .elementor-menu-toggle svg { inline-size: 20px; block-size: 20px; fill: currentColor; } @media (min-width: 1025px) { /* The menu's text follows its column: seven items plus the category chevron need about 32 times the font size plus the gaps, so 2.4cqi fits with a margin; 16px from a ~670px column, 12px at the smallest. */ .zph-site .elementor-location-header .zph-header-navigation { container-type: inline-size; } } /* Wide screens have spare menu room, so the focused search grows into it. */ @media (min-width: 1500px) { .zph-site .elementor-location-header:has(.elementor-widget-search:focus-within) { --hdr-search: 380px; } .zph-site .elementor-location-header { transition: grid-template-columns 260ms cubic-bezier(.2, .7, .2, 1); } } @media (max-width: 1024px) { .zph-site .elementor-location-header { grid-template-areas: "brand actions navigation" "search search search"; grid-template-columns: minmax(0, 1fr) auto 46px; gap: 12px; padding: 16px; } .zph-site .zph-header-brand .elementor-widget-theme-site-logo, .zph-site .zph-header-brand .elementor-widget-theme-site-logo img { inline-size: 132px; } .zph-site .elementor-location-header .elementor-menu-toggle { display: inline-flex; } .zph-site .zph-header-navigation .elementor-nav-menu__container.elementor-nav-menu--dropdown { position: absolute; inset-inline: 16px; inset-block-start: 100%; inline-size: auto !important; width: auto !important; overflow-y: auto; border: 1px solid #f0d68c33; border-radius: 14px; background: #1b140b; box-shadow: 0 24px 48px -20px #000c; } .zph-site .zph-header-navigation .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container { max-block-size: calc(100svh - 160px); } .zph-site .zph-header-navigation .elementor-widget-nav-menu { align-items: center; justify-content: center; } .zph-site .zph-header-navigation .elementor-nav-menu--dropdown .elementor-item, .zph-site .zph-header-navigation .elementor-nav-menu--dropdown .elementor-sub-item { color: #fff; font-family: "ZPH Persian", Tahoma, sans-serif; } /* One type scale in the burger menu: the same size and height as the category accordion (css/category-menu.css). */ /* Elementor paints the current/highlighted item white with gold text; in the dark dropdown keep it dark with gold text. */ .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--dropdown a.elementor-item:is(.elementor-item-active, .highlighted) { background: transparent !important; color: #f0d68c; } .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--dropdown > .elementor-nav-menu > li > a.elementor-item { min-block-size: 52px; padding-block: 12px; font-size: 15.5px; font-weight: 700; line-height: 1.6; } .zph-site .zph-header-brand .elementor-widget-search { inline-size: 100%; min-inline-size: 0; max-inline-size: none; } .zph-site .elementor-location-header .zph-header-brand .elementor-widget-search:focus-within { min-inline-size: 0; max-inline-size: none; } } /* ---------- side cart (Elementor Pro «Menu Cart» in the header) ---------- * The panel sits inside .zph-header-actions, so the round icon-button rules above exclude it * (:not(.elementor-menu-cart__container *)); before, its two buttons became empty glass circles. */ .zph-site .elementor-menu-cart__main { inline-size: min(400px, 100vw); padding: 22px 22px 18px; background: #fff; color: var(--zs-ink, #29251f); font-family: var(--zs-font, IRANSans, Tahoma, sans-serif); box-shadow: 0 0 48px -12px #17110a66; } .zph-site .elementor-menu-cart__close-button { margin-block-end: 6px; } .zph-site .elementor-menu-cart__products { max-block-size: calc(100dvh - 260px); } .zph-site .elementor-menu-cart__product { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding-block: 16px; padding-inline-end: 34px; border-block-end: 1px solid var(--zs-line, #ebe3d6); } .zph-site .elementor-menu-cart__product-image img { inline-size: 76px; block-size: 92px; object-fit: cover; border-radius: 10px; } .zph-site .elementor-menu-cart__product-name, .zph-site .elementor-menu-cart__product-price { padding-inline-start: 0; } .zph-site .elementor-menu-cart__product-name { font-size: 14px; line-height: 1.8; } .zph-site .elementor-menu-cart__product-name > a { color: var(--zs-ink, #29251f); font-weight: 700; } .zph-site .elementor-menu-cart__product-name > a:hover { color: var(--zs-gold-deep, #8a6512); } /* Variation lines: the theme prints ul > li > span (values wrapped in

), Elementor expects dl/dt/dd. */ .zph-site .elementor-menu-cart__product .variation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--zs-muted, #6b6256); font-size: 13px; line-height: 1.7; } .zph-site .elementor-menu-cart__product .variation li { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; } .zph-site .elementor-menu-cart__product .variation .item-variation-name { font-weight: 400; } .zph-site .elementor-menu-cart__product .variation .item-variation-value { color: var(--zs-ink, #29251f); font-weight: 700; } .zph-site .elementor-menu-cart__product .variation p { display: inline; margin: 0; } .zph-site .elementor-menu-cart__product-price { align-self: end; margin-block-start: 8px; color: var(--zs-ink, #29251f); font-size: 14px; font-weight: 400; } .zph-site .elementor-menu-cart__product-price .quantity { display: inline; padding: 0; border: 0; background: none; font-size: 14px; } /* an inherited font-size: 0 hid «۲ ×» */ .zph-site .elementor-menu-cart__product-price .product-quantity { color: var(--zs-muted, #6b6256); font-size: 14px; } .zph-site .elementor-menu-cart__product-price .amount { color: var(--zs-gold-deep, #8a6512); font-weight: 700; } .zph-site .elementor-menu-cart__product-remove { inset-block: 16px auto; inline-size: 26px; block-size: 26px; border-color: var(--zs-line, #ebe3d6); border-radius: 50%; } .zph-site .elementor-menu-cart__product-remove::before, .zph-site .elementor-menu-cart__product-remove::after { background: var(--zs-muted, #6b6256); } .zph-site .elementor-menu-cart__product-remove:hover { border-color: #b3261e; } .zph-site .elementor-menu-cart__product-remove:hover::before, .zph-site .elementor-menu-cart__product-remove:hover::after { background: #b3261e; } .zph-site .elementor-menu-cart__product-remove > a { inline-size: 100%; block-size: 100%; } .zph-site .elementor-menu-cart__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-start: auto; padding-block: 16px; border: 0; border-block-start: 1px solid var(--zs-line, #ebe3d6); font-size: 15px; font-weight: 400; } .zph-site .elementor-menu-cart__subtotal strong { font-weight: 700; } .zph-site .elementor-menu-cart__subtotal .amount { color: var(--zs-ink, #29251f); font-size: 18px; font-weight: 700; } .zph-site .elementor-menu-cart__footer-buttons { grid-template-columns: 1fr 1fr; gap: 10px; padding-block-start: 0; font-size: 15px; } .zph-site .elementor-menu-cart__footer-buttons .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding: 10px 14px; border: 1px solid var(--zs-gold, #d8a51d); border-radius: 999px; font: 700 15px/1.4 var(--zs-font, IRANSans, Tahoma, sans-serif); transition: filter .2s ease, background-color .2s ease; } .zph-site .elementor-menu-cart__footer-buttons .elementor-button--view-cart { background: #fff; color: var(--zs-gold-deep, #8a6512); } .zph-site .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { background: var(--zs-soft, #faf6ee); color: var(--zs-gold-deep, #8a6512); } .zph-site .elementor-menu-cart__footer-buttons .elementor-button--checkout { background: var(--zs-gold, #d8a51d); color: #1d1407; } .zph-site .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { background: var(--zs-gold, #d8a51d); color: #1d1407; filter: brightness(1.06); } .zph-site .elementor-menu-cart__footer-buttons .elementor-button-text { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: nowrap; } /* The panel is trapped in the header's stacking context, so the WhatsApp popup (z-index 999) painted over its buttons. */ body.zph-site:has(.elementor-menu-cart--shown) :is(.wa__btn_popup, .wa__popup_chat_box) { display: none; } .zph-site .elementor-menu-cart__main .woocommerce-mini-cart__empty-message { margin: 40px 0; color: var(--zs-muted, #6b6256); text-align: center; } @media (prefers-reduced-motion: reduce) { .zph-site .elementor-menu-cart__footer-buttons .elementor-button { transition: none; } } /* ---------- desktop dropdowns of other menu items (SmartMenus) ---------- * «دسته بندی محصولات» has its own component (css/category-menu.css). Any other sub-menu added in * wp-admin keeps SmartMenus with this styling; no CSS show/hide here, which fought SmartMenus' timers. */ @media (min-width: 1025px) { .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .sub-menu { inline-size: auto; min-inline-size: 236px; max-inline-size: 320px; padding: 8px; border: 1px solid #f0d68c2e; border-radius: 16px; background: #1b140bf7; box-shadow: 0 28px 56px -24px #000e; } .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .sub-menu a.elementor-sub-item { min-block-size: 42px; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; color: #fbf5e9; font: 500 14px/1.7 "ZPH Persian", Tahoma, sans-serif; white-space: nowrap; } .zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .sub-menu a.elementor-sub-item:is(:hover, :focus-visible, .highlighted, .elementor-item-active) { background: #f0d68c1f; color: #f0d68c; } }