/* ================================================================================ SHAZDEH — Product page v2 (MOBILE) — "layer over panda" stylesheet Scope: .product-container (PDP only). Gated to mobile via @media. Reuses PrestaShop/panda functional DOM (gallery, prices, variants, add-to-cart) and restyles it to the v2 glass/pink mockup. New decorative sections use .szd-pdp-* classes (markup added in product-first.tpl). Palette: pink #F478A9 / #E0568B, cream #FFF5F0, ink #3D2C2E. ================================================================================ */ :root{ --szd-pink:#F478A9; --szd-pink-dk:#E0568B; --szd-pink-soft:#FFE3EC; --szd-teal-dk:#3DA39B; --szd-red:#F25F5C; --szd-green-dk:#3DA85E; --szd-cream:#FFF5F0; --szd-ink:#3D2C2E; --szd-ink-2:#5A4A4C; --szd-ink-3:#7B6B6D; --szd-line:#F2E7E3; } /* These szd-* PDP add-ons are MOBILE-ONLY: hidden by default, shown inside the mobile @media block. */ .szd-pdp-trust, .szd-minitabs, .szd-gal-btns{ display:none; } @media (max-width: 767.98px){ /* ============================================================================ 🔴 CRITICAL SCROLL-UNLOCK — the product page was BLANK below the fold on Chrome Android (Safari iOS was lenient). Cause: theme.css `body,html{height:100%}` keeps clamped to the viewport, so on the tall product page the content (~7500px, fully rendered) is clipped and the page can't scroll (docScrollH=379, scrollable=false). Forcing body/html to natural height + visible overflow makes the page scroll and reveals all content. Verified live on the user's phone: docScrollH 379 → 7544, nowScrollable=true. Highest-specificity selectors so they beat theme.css/szd-components. ============ */ html, body#product{ height:auto !important; min-height:100% !important; max-height:none !important; overflow-x:hidden !important; overflow-y:visible !important; position:static !important; } body#product .st-container, body#product .st-pusher, body#product .st-content, body#product .st-content-inner{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } /* ---------- container ---------- */ .product-container{ background: var(--szd-cream) !important; padding-top: 14px !important; /* breathing room below the sticky header/ticker */ padding-bottom: 96px !important; /* room for floating sticky bar (shazdeh_stickypdp) */ } /* Flatten panda's old product "boxes" so the whole page reads as ONE clean cream surface (no nested white cards / borders / shadows / bootstrap container gutters). */ .product-container .product_first_section, .product-container .product_first_section > .container, .product-container .product_first_section > .container-fluid, .product-container .product_second_section, .product-container .product_second_section > .container, .product-container .product_second_section > .container-fluid, .product-container .product_third_section, .product-container .product_third_section > .container, .product-container .product_third_section > .container-fluid, .product-container .product_page_container, .product-container .product_left_content, .product-container .product_middle_column_inner, .product-container .product-information{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .product-container .product_second_section, .product-container .product_third_section{ margin-top: 6px !important; } .product-container .product_page_container{ display:block !important; margin:0 !important; } .product-container .product_left_column, .product-container .product_middle_column, .product-container .product_right_column{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important; } .product-container .product_middle_column_inner{ padding:0 !important; } /* shared glass surface helper */ .szd-glass{ background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; box-shadow: 0 4px 14px rgba(45,28,32,.06), inset 0 1px 0 rgba(255,255,255,.7); } /* ---------- GALLERY (product-cover-thumbnails) ---------- */ .product-container .product_left_content{ margin:0 !important; } .product-container .product-cover, .product-container .product-images{ margin:0 !important; } .product-container .product-cover{ background: linear-gradient(135deg,#FFF5F0,#FFE3EC) !important; border-radius: 18px !important; /* round ALL corners (task 5) */ overflow: hidden !important; padding: 8px !important; margin: 0 12px !important; /* inset 12px so it lines up with .szd-gal-bar (task 1/2) */ } .product-container .product-cover img{ border-radius: 12px !important; } .product-container .product-cover img, .product-container .js-qv-mask img, .product-container .product-cover .product_gallery_no_picture{ width:100% !important; height:auto !important; max-height:340px !important; object-fit:contain !important; } /* thumbnails strip */ .product-container .product-images, .product-container .js-qv-product-images{ display:flex !important; gap:6px !important; overflow-x:auto !important; padding:10px 12px 2px !important; scrollbar-width:none !important; } .product-container .product-images::-webkit-scrollbar{ display:none !important; } .product-container .product-images li, .product-container .thumb-container, .product-container .js-thumb-container{ flex:0 0 auto !important; margin:0 !important; } .product-container .thumb, .product-container .product-images img{ width:56px !important; height:56px !important; border-radius:10px !important; object-fit:cover !important; border:2px solid transparent !important; background:#FBE7EC !important; } .product-container .thumb.selected, .product-container li.selected .thumb{ border-color: var(--szd-pink) !important; } /* ---------- GALLERY OVERLAY BUTTONS (wishlist heart + share) ---------- */ .product-container .product_left_content{ position:relative !important; } /* SZD: gallery action TOOLBAR above the image — back + views + share + wishlist + chat. width = image. */ .product-container .szd-gal-bar{ display:flex !important; align-items:center !important; gap:7px !important; margin:0 12px 8px !important; padding:0 !important; } .product-container .szd-gal-bar__sp{ flex:1 1 auto !important; } .product-container .szd-gal-bar__views{ display:inline-flex !important; align-items:center !important; } .product-container .szd-gal-bar .szd-pv{ margin:0 !important; font-size:11px !important; white-space:nowrap !important; } .product-container .szd-gal-bar .szd-pv svg{ width:14px !important; height:14px !important; } /* chat PILL — distinct teal, labeled, gently pulsing so the customer knows to ask */ .product-container .szd-gal-chatpill{ display:flex !important; align-items:center !important; gap:6px !important; border:0 !important; cursor:pointer !important; padding:7px 12px 7px 9px !important; border-radius:100px !important; background:linear-gradient(135deg,#3DA39B,#6FD3CB) !important; color:#fff !important; font-family:inherit !important; font-weight:800 !important; font-size:11.5px !important; box-shadow:0 6px 16px rgba(61,163,155,.4) !important; animation:szdChatPulse 2.6s ease-in-out infinite !important; } .product-container .szd-gal-chatpill__ic{ display:flex !important; width:18px !important; height:18px !important; } .product-container .szd-gal-chatpill__ic svg{ width:18px !important; height:18px !important; } .product-container .szd-gal-chatpill:active{ transform:scale(.96) !important; } @keyframes szdChatPulse{ 0%,100%{ box-shadow:0 6px 16px rgba(61,163,155,.4);} 50%{ box-shadow:0 6px 22px rgba(61,163,155,.65);} } /* brand + reference row (mockup) */ .product-container .szd-brandrow{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:4px 12px !important; padding:0 12px !important; margin:0 0 6px !important; font-size:11.5px !important; color:var(--szd-ink-3) !important; } .product-container .szd-brandrow__brand b{ color:var(--szd-pink-dk) !important; font-weight:800 !important; } /* دور ۱۳۶: brand name is now a clickable link → brand page (pink + dashed underline). The user already had this pink brand row; the click capability now lives ON it. */ .product-container .szd-brandrow__brandlink{ text-decoration:none !important; border-bottom:1.5px dashed var(--szd-pink-dk) !important; padding-bottom:1px !important; cursor:pointer !important; } .product-container .szd-brandrow__brandlink b{ color:var(--szd-pink-dk) !important; } .product-container .szd-brandrow__brandlink:active{ opacity:.7 !important; } /* remove the DUPLICATE brand block the theme rendered above this row (product-brand.tpl, enabled via show_brand_logo) — the user wants ONE brand: this pink clickable one. */ .product-container .product-manufacturer{ display:none !important; } .product-container .szd-brandrow__ref{ font-variant-numeric:tabular-nums !important; opacity:.85 !important; } /* hide panda's old English reference/SKU block on mobile (ugly; we show ref in the brand row) */ .product-container .product-reference, .product-container .product-information .product-reference{ display:none !important; } .product-container .szd-gal-chat{ color:#fff !important; background:linear-gradient(135deg,#3DA39B,#6FD3CB) !important; position:relative !important; } .product-container .szd-gal-chat__dot{ position:absolute !important; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:#A8DFA8; border:2px solid #fff; } .product-container .szd-gal-back{ color:#3D2C2E !important; } .product-container .szd-gal-btn{ width:34px !important; height:34px !important; border-radius:50% !important; padding:0 !important; background:rgba(255,255,255,.9) !important; box-shadow:0 2px 8px rgba(45,28,32,.10) !important; border:1px solid rgba(255,255,255,.7) !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#3D2C2E !important; cursor:pointer !important; flex:0 0 auto !important; } .product-container .szd-gal-btn svg{ width:16px !important; height:16px !important; } .product-container .szd-gal-btn.add_to_wishlist{ color:var(--szd-pink-dk) !important; } .product-container .szd-gal-btn.add_to_wishlist.st_added svg{ fill:var(--szd-pink-dk) !important; } .product-container .szd-gal-share{ color:var(--szd-teal-dk) !important; } .product-container .szd-gal-btn:active{ transform:scale(.92) !important; } /* ---------- MINI-TABS (jump to panda tabs) ---------- */ .product-container .szd-minitabs{ display:flex !important; gap:16px !important; overflow-x:auto !important; padding:8px 2px !important; margin:0 0 6px !important; scrollbar-width:none !important; border-bottom:1px solid var(--szd-line) !important; } .product-container .szd-minitabs::-webkit-scrollbar{ display:none !important; } .product-container .szd-minitabs a{ white-space:nowrap !important; font-size:12.5px !important; font-weight:700 !important; color:var(--szd-ink-3) !important; padding:4px 0 !important; text-decoration:none !important; border-bottom:2px solid transparent !important; } .product-container .szd-minitabs a.--on{ color:var(--szd-pink-dk) !important; border-bottom-color:var(--szd-pink-dk) !important; } /* ---------- TITLE / BRAND ---------- */ .product-container .product_middle_column_inner > .h1, .product-container .product-name, .product-container h1[itemprop="name"]{ font-size:16px !important; font-weight:800 !important; line-height:1.7 !important; color:var(--szd-ink) !important; padding:10px 14px 2px !important; margin:0 !important; } .product-container .product-reference, .product-container .product-manufacturer, .product-container .pro_brand_box{ padding:0 14px !important; font-size:11px !important; color:var(--szd-ink-3) !important; } /* ---------- PRICE BLOCK ---------- */ .product-container .pro_price_block{ display:block !important; margin:8px 12px !important; padding:14px !important; background: rgba(255,255,255,.66) !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.6) !important; border-radius:14px !important; box-shadow:0 4px 14px rgba(244,120,169,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } .product-container .product-prices{ margin:0 !important; } .product-container .current-price{ display:flex !important; align-items:baseline !important; flex-wrap:wrap !important; gap:8px !important; } .product-container .current-price .price{ font-size:22px !important; font-weight:900 !important; color:var(--szd-pink-dk) !important; font-variant-numeric: tabular-nums !important; line-height:1.2 !important; } .product-container .regular-price{ font-size:13px !important; color:var(--szd-ink-3) !important; text-decoration:line-through !important; font-variant-numeric: tabular-nums !important; font-weight:600 !important; } .product-container .discount, .product-container .product-flag.discount{ background: linear-gradient(135deg, rgba(242,95,92,.92), rgba(255,127,124,.92)) !important; color:#fff !important; font-size:11px !important; font-weight:900 !important; padding:3px 9px !important; border-radius:8px !important; border:0 !important; } .product-container .tax_label{ font-size:10px !important; color:var(--szd-ink-3) !important; } /* ---------- DISCOUNT % BADGE (red pill, left of price — matches mockup .discount-pill, enlarged) ---------- */ .product-container .current-price{ position:relative !important; min-height:38px !important; padding-left:64px !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:5px 9px !important; } .product-container .szd-discount-badge{ position:absolute !important; left:0 !important; top:50% !important; transform:translateY(-50%) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(135deg,#F25F5C,#FF7F7C) !important; color:#fff !important; font-size:15px !important; font-weight:900 !important; line-height:1 !important; letter-spacing:.3px !important; padding:7px 11px !important; border-radius:11px !important; box-shadow:0 4px 12px rgba(242,95,92,.35), inset 0 1px 0 rgba(255,255,255,.4) !important; } /* ---------- VIEW COUNTER (shazdeh_paymentbadges .szd-pv) ---------- */ .product-container .szd-pv{ display:flex !important; align-items:center !important; gap:6px !important; margin:8px 0 0 !important; font-size:11.5px !important; font-weight:700 !important; color:var(--szd-ink-3) !important; font-variant-numeric:tabular-nums !important; } .product-container .szd-pv svg{ color:var(--szd-pink-dk) !important; flex-shrink:0 !important; } /* ---------- INSTALLMENT BADGES (shazdeh_paymentbadges .szd-pb-*) ---------- */ .product-container .szd-pb-container{ margin:8px 12px !important; } .product-container .szd-pb-title{ display:flex !important; align-items:center !important; gap:6px !important; font-size:12px !important; font-weight:800 !important; color:var(--szd-ink) !important; margin-bottom:8px !important; } .product-container .szd-pb-title svg{ color:var(--szd-pink-dk) !important; } .product-container .szd-pb-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; } .product-container .szd-pb-card{ display:flex !important; align-items:center !important; gap:8px !important; border-radius:12px !important; padding:10px !important; color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.08) !important; } .product-container .szd-pb-card--snapppay{ background:linear-gradient(135deg,#00BABF,#5EE0E4) !important; } .product-container .szd-pb-card--torob{ background:linear-gradient(135deg,#0099E5,#3FC3D7) !important; } .product-container .szd-pb-card--digi{ background:linear-gradient(135deg,#EF393F,#FF6B6B) !important; } .product-container .szd-pb-card--cod{ background:linear-gradient(135deg,#F0BB3D,#FFD96B) !important; color:#5E3A04 !important; } .product-container .szd-pb-logo{ width:38px !important; height:38px !important; background:#fff !important; border-radius:11px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; font-size:10px !important; font-weight:900 !important; font-style:italic !important; letter-spacing:-.3px !important; } .product-container .szd-pb-card--snapppay .szd-pb-logo{ color:#00BABF !important; } .product-container .szd-pb-card--torob .szd-pb-logo{ color:#0099E5 !important; } .product-container .szd-pb-card--digi .szd-pb-logo{ color:#EF393F !important; } .product-container .szd-pb-card--cod .szd-pb-logo{ color:#F0BB3D !important; } .product-container .szd-pb-body{ font-size:10.5px !important; font-weight:700 !important; line-height:1.45 !important; } .product-container .szd-pb-body strong{ display:block !important; font-size:11.5px !important; font-weight:900 !important; font-variant-numeric:tabular-nums !important; } /* ---------- VARIANTS (chips) ---------- */ .product-container .product-variants{ margin:8px 12px !important; padding:12px !important; } .product-container .product-variants > .product-variants-item{ margin-bottom:12px !important; } .product-container .product-variants .control-label{ display:block !important; font-size:11px !important; font-weight:800 !important; color:var(--szd-ink) !important; margin-bottom:8px !important; } /* radio/select variants -> chips */ .product-container .product-variants .input-container{ margin:0 6px 6px 0 !important; } .product-container .product-variants label.radio-label, .product-container .product-variants .input-container .radio-label{ padding:7px 12px !important; border-radius:10px !important; border:1px solid var(--szd-line) !important; background:#fff !important; font-size:11.5px !important; font-weight:700 !important; color:var(--szd-ink) !important; box-shadow:none !important; cursor:pointer !important; } .product-container .product-variants input:checked + .radio-label, .product-container .product-variants .input-container.checked .radio-label{ background: linear-gradient(135deg, rgba(244,120,169,.9), rgba(255,143,189,.9)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 4px 10px rgba(244,120,169,.32) !important; } /* color swatches */ .product-container .product-variants .color, .product-container .product-variants .input-color{ width:36px !important; height:36px !important; border-radius:10px !important; border:2px solid #fff !important; box-shadow:0 0 0 1px var(--szd-line) !important; } .product-container .product-variants input:checked + .color, .product-container .product-variants .input-container.checked .color{ box-shadow:0 0 0 3px var(--szd-pink) !important; } /* dropdown variants */ .product-container .product-variants select.form-control{ border:1px solid var(--szd-line) !important; border-radius:10px !important; padding:10px 12px !important; font-family:inherit !important; background:#fff !important; } /* ---------- QUANTITY + ADD TO CART (in-page) ---------- */ .product-container .product-add-to-cart{ margin:8px 12px !important; } .product-container #product-availability{ font-size:12px !important; font-weight:700 !important; } .product-container .product-available{ color:var(--szd-green-dk) !important; } .product-container .product-unavailable{ color:var(--szd-red) !important; } .product-container .pro_cart_block{ display:flex !important; gap:8px !important; align-items:stretch !important; } .product-container .product-quantity .qty{ margin:0 !important; } .product-container .product-quantity .input-group{ border:1px solid var(--szd-line) !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important; } .product-container .product-quantity input.input-group-field, .product-container .product-quantity #quantity_wanted{ text-align:center !important; font-weight:900 !important; color:var(--szd-ink) !important; border:0 !important; font-variant-numeric:tabular-nums !important; } .product-container .product-quantity .input-group-btn .btn, .product-container .product-quantity .bootstrap-touchspin .btn{ color:var(--szd-pink-dk) !important; background:transparent !important; border:0 !important; font-weight:900 !important; } .product-container .add .add-to-cart, .product-container .add_buy_now .add-to-cart{ width:100% !important; background: linear-gradient(135deg, var(--szd-pink), var(--szd-pink-dk)) !important; color:#fff !important; border:0 !important; border-radius:14px !important; font-family:inherit !important; font-weight:900 !important; font-size:13px !important; padding:14px !important; box-shadow:0 8px 18px rgba(244,120,169,.40) !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; } .product-container .add .add-to-cart:active{ transform:scale(.98) !important; } /* OLD in-page buy row is replaced by the floating glass bar (shazdeh_stickypdp). Keep it OFF-SCREEN but functional (NOT display:none) so the bar can proxy the REAL PrestaShop qty input + add-to-cart button (native AJAX add + stock check). */ body#product .product-add-to-cart .pro_cart_block{ position: absolute !important; left: -9999px !important; top: auto !important; visibility: visible !important; } /* On the PDP the floating buy bar takes the bottom slot → hide the bottom nav. */ body#product .szd-bnav{ display:none !important; } /* ranginesmspresta's raw "notify me" button — hidden; our OOS bar button opens our own styled popup but reads this element's data-product_id + the add_url script. */ body#product .get-mobile-wrapper{ display:none !important; } /* ---------- SHORT DESCRIPTION / READ MORE ---------- */ .product-container .product-description-short{ margin:8px 12px !important; padding:14px !important; font-size:12px !important; line-height:1.9 !important; color:var(--szd-ink-2) !important; background: rgba(255,255,255,.66) !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.6) !important; border-radius:14px !important; } .product-container .st_read_more{ color:var(--szd-pink-dk) !important; font-weight:800 !important; font-size:11px !important; } /* ---------- TABS (panda product-tabs render in 1st OR 2nd section) ---------- */ .product_second_section{ background:var(--szd-cream) !important; } .product-container .nav-tabs{ display:flex !important; gap:10px !important; overflow-x:auto !important; border:0 !important; padding:6px 12px !important; scrollbar-width:none !important; } .product-container .nav-tabs::-webkit-scrollbar{ display:none !important; } .product-container .nav-tabs .nav-link, .product-container .nav-tabs > li > a{ white-space:nowrap !important; padding:6px 2px !important; border:0 !important; border-bottom:2px solid transparent !important; font-size:12px !important; font-weight:700 !important; color:var(--szd-ink-3) !important; background:transparent !important; } .product-container .nav-tabs .nav-link.active, .product-container .nav-tabs .nav-link.on, .product-container .nav-tabs > li.active > a{ color:var(--szd-pink-dk) !important; border-bottom-color:var(--szd-pink-dk) !important; } .product-container .tab-content, .product-container .bottom_more_info_block{ margin:8px 12px !important; padding:14px !important; font-size:12.5px !important; line-height:1.95 !important; color:var(--szd-ink-2) !important; background:#fff !important; border:1px solid var(--szd-line) !important; border-radius:14px !important; } /* reviewmaster is ALREADY pink-themed (rm-* BEM + own CSS). Only stop the generic card wrapper from double-boxing its review pane. */ .product-container .tab-content .rm-tab{ background:transparent !important; padding:0 !important; border:0 !important; } /* ---------- small module harmonization (best-effort; harmless if absent) ---------- */ .product-container [data-button-action="add-to-wishlist"], .product-container .wishlist-button-add, .product-container .product-actions .wishlist{ border-radius:50% !important; background:#fff !important; color:var(--szd-pink) !important; border:1px solid var(--szd-line) !important; box-shadow:0 4px 10px rgba(0,0,0,.08) !important; } .product-container .block-reassurance li, .product-container .reassurance__item{ background:rgba(255,227,236,.45) !important; border:1px solid var(--szd-line) !important; border-radius:10px !important; } /* ---------- REASSURANCE / hook blocks spacing ---------- */ .product-container .product_left_column_hook, .product-container .reassurance, .product-container .block-reassurance{ margin:8px 12px !important; } /* ---------- RELATED / CROSS-SELL + product grids ---------- */ .product_third_section{ background:var(--szd-cream) !important; } /* non-owl product grids → horizontal scroll row. OWL carousels keep their OWN layout (the :not(.owl-carousel) guard stops us from breaking g_relatedcrosssellingproducts). */ .product_third_section .products:not(.owl-carousel), .product-container .products:not(.owl-carousel){ display:flex !important; gap:8px !important; overflow-x:auto !important; padding:6px 12px !important; scrollbar-width:none !important; flex-wrap:nowrap !important; } .product_third_section .products:not(.owl-carousel)::-webkit-scrollbar{ display:none !important; } .product_third_section .products:not(.owl-carousel) .product-miniature, .product-container .products:not(.owl-carousel) .product-miniature, .product_third_section .products:not(.owl-carousel) > li{ flex:0 0 140px !important; width:140px !important; margin:0 !important; } /* shared card surface (grid + owl slider both use .thumbnail-container) */ .product-container .product-miniature .thumbnail-container, .product-container .products .thumbnail-container{ background: rgba(255,255,255,.72) !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:12px !important; box-shadow:0 4px 14px rgba(45,28,32,.06) !important; padding:7px !important; } .product_third_section h2, .product_third_section .h2, .product_third_section .featured-products .h2{ font-size:14px !important; font-weight:800 !important; color:var(--szd-ink) !important; padding:14px 12px 4px !important; } /* ---------- g_relatedcrosssellingproducts (owl slider) — match the site, all modes ---------- */ .product-container .grelated_products{ margin:6px 0 0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .product-container .products-section-title{ font-size:14px !important; font-weight:800 !important; color:var(--szd-ink) !important; text-transform:none !important; padding:14px 12px 8px !important; margin:0 !important; border:0 !important; } .product-container .owl_slider.products{ padding:0 12px !important; } .product-container .grelated_products .product-miniature{ padding:4px !important; } .product-container .grelated_products .product-title a, .product-container .grelated_products .product-title{ font-size:11.5px !important; font-weight:600 !important; color:var(--szd-ink) !important; line-height:1.5 !important; } .product-container .grelated_products .price{ font-size:12.5px !important; font-weight:900 !important; color:var(--szd-pink-dk) !important; } .product-container .grelated_products .regular-price{ color:var(--szd-ink-3) !important; text-decoration:line-through !important; font-size:10.5px !important; } .product-container .grelated_products .add-to-cart{ background:linear-gradient(135deg,var(--szd-pink),var(--szd-pink-dk)) !important; border:0 !important; border-radius:10px !important; color:#fff !important; font-weight:800 !important; } .product-container .grelated_products .owl-nav button, .product-container .grelated_products .owl-nav .owl-prev, .product-container .grelated_products .owl-nav .owl-next{ width:32px !important; height:32px !important; border-radius:50% !important; margin:0 !important; background:#fff !important; box-shadow:0 3px 10px rgba(0,0,0,.1) !important; color:var(--szd-pink-dk) !important; } .product-container .grelated_products .owl-dots .owl-dot.active span{ background:var(--szd-pink-dk) !important; } /* ---------- TRUST ROW (static, added in product-first.tpl) ---------- */ .szd-pdp-trust{ margin:6px 12px; padding:11px 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.6); border-radius:14px; } .szd-pdp-trust__cell{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; } .szd-pdp-trust__icon{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .szd-pdp-trust__icon svg{ width:18px; height:18px; } .szd-pdp-trust__cell:nth-child(1) .szd-pdp-trust__icon{ background:#FFE3EC; color:var(--szd-pink-dk); } .szd-pdp-trust__cell:nth-child(2) .szd-pdp-trust__icon{ background:#FFEFD6; color:#C68C1C; } .szd-pdp-trust__cell:nth-child(3) .szd-pdp-trust__icon{ background:#D6F0EE; color:var(--szd-teal-dk); } .szd-pdp-trust__cell:nth-child(4) .szd-pdp-trust__icon{ background:#E0F0D8; color:#6BB36B; } .szd-pdp-trust__lbl{ font-size:9.5px; font-weight:700; color:var(--szd-ink); } /* ===== round 3 — screenshot-driven fixes ===== */ /* bigger product title */ .product-container .product-name, .product-container h1[itemprop="name"], .product-container h1.product_name{ font-size:19px !important; line-height:1.65 !important; } /* mini-tabs: breathing room from the edges */ .product-container .szd-minitabs{ padding-left:14px !important; padding-right:14px !important; } /* installments were rendered INSIDE panda's (often hidden/empty) tax-shipping-delivery-label */ .product-container .tax-shipping-delivery-label{ display:block !important; visibility:visible !important; height:auto !important; } /* installment cards: compact so they fit on mobile */ .product-container .szd-pb-card{ padding:8px !important; gap:7px !important; } .product-container .szd-pb-body{ font-size:10px !important; } .product-container .szd-pb-body strong{ font-size:11px !important; } /* product-details / description = ONE clean card: kill panda's nested inner boxes */ .product-container .bottom_more_info_block, .product-container .pro_more_info, .product-container .right_more_info_block, .product-container .tab-pane-body, .product-container .data-sheet, .product-container .product-features, .product-container .rte-content, .product-container .tab-content .tab-pane > div:not(table):not(dl):not(ul):not(ol){ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; } /* hide panda's MISPLACED native brand block (we show the brand logo in the brand row instead) */ .product-container .manufacturer-logo, .product-container .pro_brand_box, .product-container .product-manufacturer, .product-container .product-reference.pro_extra_info, .product-container .pro_extra_info.product-reference{ display:none !important; } /* brand-row logo (shown where the manufacturer has an uploaded image; onerror removes if missing) */ .product-container .szd-brandrow__logo{ display:inline-block !important; height:22px !important; width:auto !important; max-width:64px !important; object-fit:contain !important; vertical-align:middle !important; border-radius:4px !important; } /* ============ ROUND 8 — tasks 6 / 13 / 14 ============ */ /* TASK 13: reviews module (reviewmaster in .product-additional-info) was too wide → inset like the other cards */ .product-container .product-additional-info{ margin:10px 12px !important; padding:0 !important; max-width:calc(100% - 24px) !important; } .product-container .product-additional-info > *{ margin-left:0 !important; margin-right:0 !important; } /* reviewmaster review-FORM (.rmpdp) + Q&A (.rmqa) render outside .product-additional-info, in a full-width .container → inset them too */ .product-container .rmpdp, .product-container .rmqa{ margin-left:12px !important; margin-right:12px !important; box-sizing:border-box !important; max-width:calc(100% - 24px) !important; } /* TASK 6: توضیحات + جزئیات = two SEPARATE always-open cards (no accordion); pad the text (round-3 had zeroed .tab-pane-body) */ .product-container #description.tab-pane, .product-container #product-details.tab-pane{ display:block !important; opacity:1 !important; height:auto !important; max-height:none !important; visibility:visible !important; margin:10px 12px !important; padding:0 0 4px !important; background:rgba(255,255,255,.66) !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:14px !important; box-shadow:0 4px 14px rgba(244,120,169,.06) !important; overflow:hidden !important; } .product-container #description.tab-pane .tab-pane-body, .product-container #product-details.tab-pane .tab-pane-body{ display:block !important; height:auto !important; max-height:none !important; opacity:1 !important; padding:4px 14px 12px !important; } .product-container #product-details.tab-pane .data-sheet{ width:auto !important; } /* TASK 14: publisher/author sliders → wrap as a card + smaller dots (autoplay added via JS in product-first.tpl) */ .product-container .grelated_products{ margin:10px 12px !important; padding:4px 0 12px !important; background:rgba(255,255,255,.66) !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:14px !important; box-shadow:0 4px 14px rgba(244,120,169,.06) !important; } .product-container .grelated_products .products-section-title{ padding:12px 14px 6px !important; } .product-container .grelated_products .owl-dots{ margin-top:8px !important; line-height:0 !important; } .product-container .grelated_products .owl-dots .owl-dot span{ width:7px !important; height:7px !important; margin:0 3px !important; background:var(--szd-line) !important; box-shadow:none !important; transition:width .25s, background .25s !important; } .product-container .grelated_products .owl-dots .owl-dot.active span{ width:18px !important; height:7px !important; border-radius:4px !important; background:var(--szd-pink-dk) !important; } /* collapse empty leftover blocks → no extra vertical gaps */ .product-container .product_left_column_hook:empty, .product-container .pro_extra_info:empty, .product-container .block-reassurance:empty, .product-container .product-manufacturer:empty{ display:none !important; margin:0 !important; padding:0 !important; } /* product details → clean TABLE look (rows with separators) */ .product-container .data-sheet{ display:grid !important; grid-template-columns:auto 1fr !important; } .product-container .data-sheet dt, .product-container .data-sheet dd{ padding:11px 6px !important; border-bottom:1px solid var(--szd-line) !important; margin:0 !important; font-size:12.5px !important; } .product-container .data-sheet dt{ font-weight:800 !important; color:var(--szd-ink) !important; } .product-container .data-sheet dd{ text-align:left !important; color:var(--szd-ink-2) !important; } .product-container #product-details table, .product-container #product-details .table{ width:100% !important; border-collapse:collapse !important; } .product-container #product-details table td, .product-container #product-details table th{ padding:11px 6px !important; border-bottom:1px solid var(--szd-line) !important; font-size:12.5px !important; } /* ===== round 5: COHESION — uniform 12px horizontal inset for EVERY content block, gallery stays full-width. (Verified live in Chrome: brand/minitabs/price/tabs/related all align to L≈12/R≈12.) Kills panda's inconsistent bootstrap nesting insets. ===== */ /* FLATTEN panda's nested bootstrap containers → zero inset (kills double-padding) */ .product-container .product_first_section, .product-container .product_second_section, .product-container .product_third_section, .product-container .product_first_section > .container, .product-container .product_second_section > .container, .product-container .product_third_section > .container, .product-container .row, .product-container [class*="col-"], .product-container .product_desc_column, .product-container .product_desc_block, .product-container .product_middle_column, .product-container .product_middle_column_inner, .product-container .product-information, .product-container .bottom_more_info_block, .product-container .pro_more_info, .product-container .nav-tabs, .product-container .tab-content, .product-container .tab-content .tab-pane{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; max-width:100% !important; } .product-container .product_left_content, .product-container .product_left_column{ padding:0 !important; margin:0 !important; } /* 12px INSET for every visible content box (gallery stays full-width). product_info_tabs = the tabs/accordion box; product-additional-info = reviews+Q&A box. */ .product-container .szd-brandrow, .product-container .szd-minitabs, .product-container .product-description-short, .product-container .pro_price_block, .product-container .szd-pdp-trust, .product-container .product-variants, .product-container .product_info_tabs, .product-container .product-additional-info, .product-container .products-section-title, .product-container .owl_slider.products, .product-container .products:not(.owl-carousel){ margin-left:12px !important; margin-right:12px !important; } /* reviewmaster summary TEASER inside product-additional-info → flat (parent already 12px-inset) */ .product-container .product-additional-info > *, .product-container .product-additional-info [class^="rm-"], .product-container .product-additional-info [class*=" rm-"]{ margin-left:0 !important; margin-right:0 !important; max-width:100% !important; } /* FULL reviews + Q&A (AJAX) render BARE in product_third_section's flattened .container → inset every reviewmaster block + the Q&A box to the uniform 12px edge so they don't touch the sides */ .product-container .product_third_section .rm-tab, .product-container .product_third_section .rm-summary, .product-container .product_third_section [class^="rm-"], .product-container .product_third_section [class*=" rm-"], .product-container .product_third_section #rmqa, .product-container #rmqa, .product-container [class^="rm-write"]{ margin-left:12px !important; margin-right:12px !important; max-width:calc(100% - 24px) !important; } .product-container .szd-brandrow, .product-container .szd-minitabs, .product-container .product_info_tabs{ padding-left:0 !important; padding-right:0 !important; } .product-container .pro_price_block .szd-pb-container, .product-container .pro_price_block .szd-pv{ margin-left:0 !important; margin-right:0 !important; } /* bigger brand logo */ .product-container .szd-brandrow__logo{ height:36px !important; max-width:90px !important; border-radius:8px !important; } /* ===== round 7: rounded image + text padding + remove trust gaps + uniform rhythm (cohesion) ===== */ /* (1) gallery image → rounded corners (sticker flags live on the outer .posi_rel, so they aren't clipped) */ .product-container .pro_popup_trigger_box{ border-radius:18px !important; overflow:hidden !important; } .product-container .pro_popup_trigger_box img, .product-container .product-cover img, .product-container .product_gallery_no_picture, .product-container .images-container img.general_border{ border-radius:18px !important; } /* (2) description / details TEXT — padded inside its box (was glued to the sides) */ .product-container .tab-content .tab-pane{ padding:6px 14px 14px !important; box-sizing:border-box !important; } .product-container .product-description-short{ padding-left:14px !important; padding-right:14px !important; box-sizing:border-box !important; } /* (3) trust row — remove the empty space above/below (panda reassurance dup + leftover info blocks) */ .product-container .szd-pdp-trust{ margin:6px 12px !important; } .product-container .block-reassurance, .product-container .reassurance, .product-container .pro_reassurance, .product-container .product-reassurance, .product-container .pro_extra_info, .product-container .pro_extra_info_content{ display:none !important; } .product-container .product_left_column_hook:empty, .product-container .product_right_column:empty, .product-container .pro_extra_info:empty{ display:none !important; margin:0 !important; padding:0 !important; } /* (4) COHESION — one uniform vertical gap between every section (kills the "each block on its own" feel) */ .product-container .szd-brandrow, .product-container .szd-minitabs, .product-container .product-description-short, .product-container .pro_price_block, .product-container .szd-pdp-trust, .product-container .product-variants, .product-container .product_info_tabs, .product-container .product-additional-info, .product-container .products-section-title, .product-container .owl_slider.products{ margin-top:0 !important; margin-bottom:10px !important; } .product-container .product_desc_block, .product-container .product_second_section, .product-container .product_third_section{ margin-top:0 !important; padding-top:0 !important; } /* ============ GALLERY — white square box (rounded) + action bar aligned to the image (user spec) ============ */ .product-container .product_left_content{ position:relative !important; margin:0 !important; padding:0 !important; } /* action bar ABOVE the box: back (right) + share & wishlist (left); inset to the image edges (15%) so nothing overflows; little top space */ .product-container .szd-gal-topbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; padding:4px 0 4px !important; margin:0 10px !important; } .product-container .szd-gal-topbar__l{ display:flex !important; align-items:center !important; gap:8px !important; } /* WHITE square box, ROUNDED corners; image centred with >=15% white on each side */ .product-container .pro_gallery_top{ background:#fff !important; aspect-ratio:1 / 1 !important; height:auto !important; min-height:280px !important; border-radius:16px !important; overflow:hidden !important; margin:0 10px !important; } .product-container .pro_gallery_top .swiper-wrapper{ height:100% !important; align-items:center !important; } .product-container .pro_gallery_top .swiper-slide{ height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; } .product-container .pro_gallery_top .pro_popup_trigger_box{ width:auto !important; height:auto !important; } /* panda zoom button — keep small */ .product-container .pro_gallery_top img.pro_gallery_item, .product-container .pro_gallery_top .swiper-slide img{ height:auto !important; width:auto !important; max-width:70% !important; max-height:70% !important; object-fit:contain !important; border-radius:4px !important; margin:0 auto !important; display:block !important; } /* keep each slide full-width so the image sits dead-centre (no swiper side-margin offset) */ .product-container .pro_gallery_top .swiper-slide{ margin:0 !important; } .product-container .pro_gallery_top .swiper-button-next, .product-container .pro_gallery_top .swiper-button-prev{ display:none !important; } .product-container .pro_gallery_top .swiper-pagination{ bottom:8px !important; } .product-container .pro_gallery_top .swiper-pagination-bullet{ width:6px !important; height:6px !important; background:#D8C9C5 !important; opacity:1 !important; margin:0 3px !important; } .product-container .pro_gallery_top .swiper-pagination-bullet-active{ width:18px !important; border-radius:3px !important; background:var(--szd-pink) !important; } } /* end @media mobile */ /* ================================================================================ FLOATING BUY BAR — mirrored from shazdeh_stickypdp/sticky-pdp.css INTO the theme stylesheet so it ALWAYS loads. (The module's bundled CSS was missing on staging, leaving the bar with no position/transform → invisible.) Mobile-only. ================================================================================ */ .szd-sticky-pdp{ position: fixed; bottom: 14px; left: 0; right: 0; margin: 0 auto; width: calc(100% - 28px); max-width: 402px; height: 64px; z-index: 61; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.5); border-radius: 22px; box-shadow: 0 12px 30px rgba(45,28,32,.18), 0 2px 6px rgba(45,28,32,.06), inset 0 1px 0 rgba(255,255,255,.7); padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-family: 'Vazirmatn','Tahoma',sans-serif; transform: translateY(150%); transition: transform .35s cubic-bezier(.34,1.4,.6,1); } .szd-sticky-pdp.--visible{ transform: translateY(0); } .szd-sticky-pdp__qty{ display:flex; align-items:center; background:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%); border:1px solid rgba(255,255,255,.6); border-radius:12px; padding:2px; gap:1px; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(45,28,32,.05); } .szd-sticky-pdp__qty button{ width:32px; height:32px; border:0; background:transparent; font-size:18px; font-weight:900; color:#E0568B; border-radius:10px; cursor:pointer; font-family:inherit; line-height:1; } .szd-sticky-pdp__qty button:disabled{ opacity:.4; cursor:default; } .szd-sticky-pdp__q{ width:30px; text-align:center; font-size:14px; font-weight:900; color:#3D2C2E; font-variant-numeric:tabular-nums; } .szd-sticky-pdp__cta{ flex:1; height:48px; background:linear-gradient(135deg,rgba(244,120,169,.82),rgba(255,143,189,.86)); -webkit-backdrop-filter:blur(14px) saturate(200%); backdrop-filter:blur(14px) saturate(200%); color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:14px; font-family:inherit; font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; box-shadow:0 8px 18px rgba(224,86,139,.32),inset 0 1px 0 rgba(255,255,255,.55); } .szd-sticky-pdp__cta svg{ width:18px; height:18px; flex-shrink:0; } .szd-sticky-pdp__cta small{ font-weight:700; opacity:.96; font-variant-numeric:tabular-nums; } .szd-sticky-pdp__cta .ishop-currency-symbol{ width:.8em; height:.62em; background-color:#fff; margin-right:2px; } .szd-sticky-pdp__cta--oos{ flex:1; background:#ECE0DC !important; color:#9B8B8D !important; cursor:not-allowed !important; box-shadow:none !important; } .szd-sticky-pdp__cta--notify{ flex:1; background:linear-gradient(135deg,rgba(61,163,155,.9),rgba(111,211,203,.92)) !important; box-shadow:0 8px 18px rgba(61,163,155,.32) !important; } @media (min-width:768px){ .szd-sticky-pdp{ display:none !important; } } /* ================================================================================ SHARE bottom-sheet — 6 networks (task 4). Icons in /themes/panda-redesign/assets/img/share/ ================================================================================ */ .szd-share{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:flex-end; justify-content:center; font-family:'Vazirmatn','Tahoma',sans-serif; } .szd-share[hidden]{ display:none; } .szd-share__backdrop{ position:absolute; inset:0; background:rgba(45,28,32,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s; } .szd-share.--on .szd-share__backdrop{ opacity:1; } .szd-share__sheet{ position:relative; z-index:1; width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0; padding:6px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(45,28,32,.28); transform:translateY(100%); transition:transform .3s cubic-bezier(.34,1.4,.6,1); } .szd-share.--on .szd-share__sheet{ transform:translateY(0); } .szd-share__sheet::before{ content:''; display:block; width:42px; height:4px; border-radius:4px; background:#E8DAD6; margin:8px auto 12px; } .szd-share__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .szd-share__head span{ font-weight:900; font-size:15px; color:#3D2C2E; } .szd-share__x{ width:32px; height:32px; border:0; background:#F6ECE9; border-radius:50%; font-size:22px; line-height:1; color:#9B8B8D; cursor:pointer; } .szd-share__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 8px; } .szd-share__item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } .szd-share__ic{ width:60px; height:60px; border-radius:18px; background:#F8F1EE; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(45,28,32,.07); transition:transform .15s; overflow:hidden; } .szd-share__item:active .szd-share__ic{ transform:scale(.93); } .szd-share__ic img{ width:36px; height:36px; object-fit:contain; } .szd-share__lbl{ font-size:12px; font-weight:700; color:#5A4A4C; } .szd-share__msg{ min-height:20px; text-align:center; font-size:12px; font-weight:800; color:#3DA85E; margin-top:14px; opacity:0; transition:opacity .2s; } .szd-share__msg.--on{ opacity:1; } /* ===== floating "ask" pill — relocated to by JS so position:fixed is reliable ===== */ @keyframes szdChatPulseB{ 0%,100%{ box-shadow:0 8px 20px rgba(61,163,155,.45);} 50%{ box-shadow:0 8px 26px rgba(61,163,155,.66);} } .szd-gal-chatpill{ position:fixed; bottom:90px; right:14px; left:auto; top:auto; z-index:59; display:flex; align-items:center; gap:6px; border:0; cursor:pointer; padding:8px 14px 8px 11px; border-radius:100px; background:linear-gradient(135deg,#3DA39B,#6FD3CB); color:#fff; font-family:'Vazirmatn','Tahoma',sans-serif; font-weight:800; font-size:12px; box-shadow:0 8px 20px rgba(61,163,155,.45); animation:szdChatPulseB 2.6s ease-in-out infinite; -webkit-tap-highlight-color:transparent; } .szd-gal-chatpill__ic{ display:flex; width:18px; height:18px; } .szd-gal-chatpill__ic svg{ width:18px; height:18px; } .szd-gal-chatpill:active{ transform:scale(.96); } @media (min-width:768px){ .szd-gal-chatpill{ display:none !important; } } /* ===== FORCE the floating elements to actually float on mobile ===== (panda was overriding position:fixed via a nav/button rule; our rule had no !important. Also keep the buy bar always shown — its translateY hide depended on a JS class that wasn't applied.) */ @media (max-width:767.98px){ .szd-sticky-pdp{ position:fixed !important; transform:translateY(0) !important; display:flex !important; } .szd-gal-chatpill{ position:fixed !important; display:flex !important; } } /* ===== Product image lightbox (Magnific Popup, .st_pro_mfp) — redesign (دور ۱۱۲) ===== */ .mfp-bg.st_pro_mfp{background:#241433 !important;opacity:.75 !important} .mfp-wrap.st_pro_mfp .mfp-img{border-radius:18px;background:#fff;padding:10px;box-shadow:0 26px 64px rgba(18,6,36,.5)} .mfp-wrap.st_pro_mfp .mfp-figure::after{display:none !important} .mfp-wrap.st_pro_mfp .mfp-figure figure{margin:0} .mfp-wrap.st_pro_mfp button.mfp-close,.mfp-wrap.st_pro_mfp .mfp-close{width:44px;height:44px;line-height:42px;top:10px;right:10px;padding:0;opacity:1;color:#fff;font-size:30px;font-weight:400;background:rgba(255,255,255,.16);border-radius:50%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s} .mfp-wrap.st_pro_mfp .mfp-close:hover{background:rgba(255,255,255,.34)} .mfp-wrap.st_pro_mfp .mfp-counter{color:#fff;font-family:inherit;font-weight:700;opacity:.92;right:14px;top:12px} .mfp-wrap.st_pro_mfp .mfp-title{color:#fff;font-family:inherit} .mfp-wrap.st_pro_mfp .mfp-arrow{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1;top:50%;margin-top:-23px;transition:background .2s} .mfp-wrap.st_pro_mfp .mfp-arrow:hover{background:rgba(255,255,255,.32);opacity:1} .mfp-wrap.st_pro_mfp .mfp-arrow::before{display:none !important} .mfp-wrap.st_pro_mfp .mfp-arrow::after{border:0 !important;margin:0 !important;width:46px !important;height:46px !important;left:0 !important;top:0 !important;color:#fff;font-size:30px;line-height:46px;text-align:center;opacity:1} .mfp-wrap.st_pro_mfp .mfp-arrow-left::after{content:'\2039'} .mfp-wrap.st_pro_mfp .mfp-arrow-right::after{content:'\203A'} /* ===== PDP: surfaced brand line (JS-inserted near title) + author/translator links (دور ۱۱۶/۱۱۷) ===== */ #product .szd-brand-line{font-size:13px;font-weight:700;color:var(--ink-2,#666);margin:8px 0 4px} #product .szd-brand-line .szd-brand-link{color:#2A8F87;font-weight:800;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:4px;margin-right:3px} #product .szd-brand-line .szd-brand-link:hover{color:#1f6b65} .data-sheet .value a.szd-feat-link{color:#2A8F87;font-weight:700;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:4px;transition:color .15s} .data-sheet .value a.szd-feat-link:hover{color:#1f6b65}