/* Theme Name: Modrah Child Theme URI: https://modrah.com Description: قالب فرزند ووکامرس مدراه — پیاده‌سازی دیزاین‌سیستم «راهِ مد» روی Storefront. Author: Modrah Template: storefront Version: 1.6.1 Text Domain: modrah-child */ /* ===================== Design tokens ===================== */ :root { --md-accent: #2145E6; --md-accent-dark: #1733AE; --md-accent-tint: #EBEFFD; --md-accent-soft: #7E96F5; --md-ink: #17191F; --md-ink-2: #5C6066; --md-ink-3: #9BA0A6; --md-bg: #F8F7F4; --md-bg-2: #F1F0EC; --md-line: #E8E6E0; --md-line-2: #C6C3BC; --md-surface: #FFFFFF; --md-success: #178A50; --md-success-tint: #E9F6EF; --md-warning: #B45309; --md-warning-tint: #FDF3E7; --md-danger: #C03A30; --md-danger-tint: #FBEAE9; --md-r-s: 8px; --md-r-m: 12px; --md-r-l: 16px; --md-shadow-sm: 0 1px 3px rgba(23, 25, 31, .08); --md-shadow-md: 0 4px 16px rgba(23, 25, 31, .10); --md-shadow-lg: 0 12px 32px rgba(23, 25, 31, .16); --md-font-fa: 'Vazirmatn', sans-serif; --md-font-la: 'DM Sans', sans-serif; --md-ease: cubic-bezier(.2, .8, .2, 1); } @keyframes mdPulse { 0% { box-shadow: 0 0 0 0 rgba(33,69,230,.35); } 70% { box-shadow: 0 0 0 10px rgba(33,69,230,0); } 100% { box-shadow: 0 0 0 0 rgba(33,69,230,0); } } @keyframes mdPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(180,83,9,.30); } 70% { box-shadow: 0 0 0 10px rgba(180,83,9,0); } 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0); } } @keyframes mdFade { from { opacity: 0; } to { opacity: 1; } } @keyframes mdDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes mdSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes mdModalIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes mdShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(6px); } 75% { transform: translateX(-6px); } } @keyframes mdDash { to { stroke-dashoffset: -20; } } @keyframes mdSpin { to { transform: rotate(360deg); } } /* ===================== Base / RTL ===================== */ /* Clamp page-level horizontal scroll on mobile. The rails, category nav, gallery and chips are their own overflow-x:auto scrollers, so this only kills the accidental page overflow (WC screen-reader region, a rail that escapes its container) — inner swipe-scrolling still works. On it is position:sticky-safe (the header keeps sticking). */ html { direction: rtl; overflow-x: hidden; } body, body.woocommerce-page { margin: 0; max-width: 100%; background: var(--md-bg); font-family: var(--md-font-fa); color: var(--md-ink); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.9; } * { box-sizing: border-box; } bdi, .md-latin { font-family: var(--md-font-la); direction: ltr; unicode-bidi: isolate; } h1, h2, h3, h4 { color: var(--md-ink); margin: 0; } a { color: var(--md-accent); } .md-container { max-width: 1080px; margin: 0 auto; padding: 0 16px; } /* neutralize storefront chrome */ .storefront-breadcrumb, .site-header, .storefront-sorting select, #masthead, .storefront-handheld-footer-bar, .site-footer { all: unset; } .storefront-handheld-footer-bar { display: none !important; } body.rtl .col-full, .col-full { max-width: none; padding: 0; margin: 0; } .site-main { margin: 0; } /* no sidebar anywhere — content always full width */ #secondary, .widget-area { display: none !important; } #primary, .content-area { width: 100% !important; float: none !important; margin: 0 !important; } /* plain pages (tracking, about, ...) get the standard container */ body.page .site-main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; } body.page .entry-title { font-size: 26px; font-weight: 800; margin-bottom: 16px; } /* ===================== Single product layout (Storefront structure) ===== */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* exactly two columns */ gap: 24px 40px; max-width: 1080px; margin: 0 auto; padding: 24px 20px 48px; align-items: start; } /* explicit placement: image + summary share row 1 (RTL col 1 = right). Auto-placement was dropping them into separate rows because of the full-width tabs/related siblings. */ .single-product div.product > .md-gallery { grid-row: 1; grid-column: 1; width: 100%; max-width: 100%; position: sticky; top: 84px; /* image stays while the long summary scrolls */ } .single-product div.product > .summary, .single-product div.product > .entry-summary { grid-row: 1; grid-column: 2; } @media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; gap: 20px; } .single-product div.product > .md-gallery, .single-product div.product > .summary, .single-product div.product > .entry-summary { grid-column: 1; } .single-product div.product > .md-gallery { /* relative, NOT static: only the sticky needs dropping here. Static made div.product the containing block for the gallery's absolutely positioned children, so the dots rendered ~1900px away at the foot of the product block and the zoom hint anchored to the wrong box. */ grid-row: 1; position: relative; max-width: 460px; margin: 0 auto; } .single-product div.product > .summary, .single-product div.product > .entry-summary { grid-row: 2; } } .single-product div.product .entry-summary, .single-product div.product .summary { display: flex; flex-direction: column; gap: 14px; /* WC core gives .summary a percentage width + float, Storefront adds a ~59px em-based margin-bottom that inflates the grid row — kill all */ width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; } /* WooCommerce's clearfix pseudo-elements become EMPTY GRID ROWS here (each one adds a full row-gap of dead space before the related products); a grid container needs no float clearing */ .single-product div.product::before, .single-product div.product::after { display: none; } .single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; } .single-product div.product .woocommerce-tabs, .single-product div.product .related.products, .single-product div.product .up-sells, .single-product .mdr-other-colors { grid-column: 1 / -1; } .single-product .entry-summary .product_title { display: none; } /* we render our own H1 */ .single-product span.onsale { display: none !important; } /* stray grid item */ .single-product .quantity { display: none; } /* one-of-a-kind purchases */ .single-product .single_add_to_cart_button { height: 48px; border: none; border-radius: var(--md-r-m); background: var(--md-accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 32px; cursor: pointer; } .single-product .single_add_to_cart_button:hover { background: var(--md-accent-dark); } .single-product .single_add_to_cart_button.disabled { background: var(--md-line); color: var(--md-ink-3); } .single-product table.variations { margin: 0; } .single-product table.variations th.label { display: none; } .single-product .woocommerce-variation-price { display: none; } /* price shown in our header */ .single-product .reset_variations { font-size: 12px; } .related.products > h2, .up-sells > h2 { font-size: 20px; font-weight: 700; margin: 0 0 14px; text-align: right; } /* ===================== Buttons ===================== */ .md-btn { height: 48px; padding: 0 24px; border: none; border-radius: var(--md-r-m); background: var(--md-accent); color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none !important; transition: background .2s; } .md-btn:hover { background: var(--md-accent-dark); } .md-btn--ghost { background: transparent; border: 1.5px solid var(--md-ink); color: var(--md-ink) !important; font-weight: 600; } .md-btn--ghost:hover { background: var(--md-ink); color: #fff !important; } .md-btn--text { background: transparent; color: var(--md-accent) !important; font-weight: 600; height: 44px; } .md-btn--text:hover { background: var(--md-accent-tint); } .md-btn--success { background: var(--md-success); } .md-btn--success:hover { background: #106B3D; } .md-btn:disabled, .md-btn--disabled { background: var(--md-line); color: var(--md-ink-3) !important; cursor: not-allowed; } /* ===================== Badges & chips ===================== */ .md-badge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--md-r-s); display: inline-block; width: fit-content; } .md-badge--warn { background: var(--md-warning-tint); color: var(--md-warning); } .md-badge--info { background: var(--md-accent-tint); color: var(--md-accent-dark); } .md-badge--ok { background: var(--md-success-tint); color: var(--md-success); } .md-badge--err { background: var(--md-danger-tint); color: var(--md-danger); } .md-rate-chip { display: flex; align-items: center; gap: 8px; background: var(--md-accent-tint); border: 1px dashed var(--md-accent); border-radius: 999px; padding: 8px 16px; width: fit-content; font-size: 12px; font-weight: 600; color: var(--md-accent-dark); } .md-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-accent); animation: mdPulse 2s infinite; flex-shrink: 0; } /* ===================== Rate bar + header ===================== */ .md-rate-bar { background: var(--md-ink); color: #D7DAE0; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; text-align: center; } .md-rate-bar strong { color: #fff; } .md-rate-bar .md-pulse-dot { background: var(--md-accent-soft); width: 6px; height: 6px; } .md-rate-bar span:last-child { min-width: 0; } @media (max-width: 480px) { .md-rate-bar { font-size: 11px; line-height: 1.7; padding: 7px 12px; } } .md-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--md-line); } .md-header__row { max-width: 1080px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .md-header__group { display: flex; align-items: center; gap: 4px; } .md-iconbtn { width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--md-ink); position: relative; border-radius: var(--md-r-m); } .md-iconbtn:hover { background: var(--md-bg-2); } /* something in core/parent zeroes svg width inside