/* ========================================================================== shop-002 — 2026 design layer (2026-08-11) Loaded LAST, after main.css (Tailwind v4) and theme-glue.css. WHY THIS FILE WINS WITHOUT !important Tailwind v4 ships everything inside @layer theme / base / utilities. Unlayered CSS beats every layered rule regardless of specificity, so this file settles the cascade by existing — no !important, no specificity war. SCOPE Every rule is under .shop-002-page (set on in _BaseLayout). Nothing here can reach shop-001, Default, shop-0012, the admin area, or any shared view. No bare element selectors outside that scope. REM BASE shop-002 does NOT use html{font-size:62.5%}. 1rem = 16px here. Every token below carries its px value in a comment. ========================================================================== */ /* ───────────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────────────────────────────────── */ .shop-002-page { --color-primary-50: #F5F5F4; --color-primary-100: #E7E5E4; --color-primary-200: #D6D3D1; --color-primary-300: #A8A29E; --color-primary-400: #57534E; --color-primary-500: #292524; --color-primary-600: #1C1917; --color-primary-700: #17140F; --color-primary-800: #0C0A09; /* ══ 1b. Semantic surfaces & ink ════════════════════════════════════ */ --s2-canvas: #FAFAF9; --s2-surface: #FFFFFF; --s2-sunken: #F5F5F4; --s2-ink: #1C1917; --s2-body: #44403C; --s2-muted: #78716C; --s2-hairline: rgba(28, 25, 23, .10); --s2-hairline-strong: rgba(28, 25, 23, .20); --s2-link: var(--s2-ink); --s2-buy: #c72444; --s2-buy-hover: #c72444; --s2-buy-ink: #FFFFFF; --s2-buy-solid: #c72444; --s2-price: var(--s2-ink); --s2-sale: #9F1239; --s2-success: #15803D; /* 4.87:1 */ --s2-danger: #B3261E; --s2-warning: #c72444; --s2-star: #c72444; --s2-shimmer: #EFEEEC; /* ══ 1d. Typography ═════════════════════════════════════════════════ */ --s2-ff: yekanBakhRegular, Tahoma, sans-serif; --s2-ff-med: yekanBakhSemiBold, Tahoma, sans-serif; --s2-ff-bold: yekanBakhBold, Tahoma, sans-serif; --s2-ff-black: yekanBakhExtraBold, Tahoma, sans-serif; --fs-display: clamp(2rem, 1.2rem + 3vw, 2.75rem); /* 32 → 44 */ --fs-h1: clamp(1.375rem, 1.1rem + .8vw, 1.625rem); --fs-h2: clamp(1.25rem, 1rem + 1vw, 1.625rem); /* 20 → 26 */ --fs-h3: 1.25rem; /* 20 */ --fs-body-lg: 1.0625rem; /* 17 */ --fs-body: 0.9375rem; /* 15 */ --fs-body-sm: 0.8125rem; /* 13 */ --fs-caption: 0.75rem; /* 12 */ --lh-heading: 1.4; /* Persian needs more leading than Latin */ --lh-body: 1.8; --lh-snug: 1.6; --ls: 0; /* never negative — it breaks Persian joins */ /* ══ 1e. Spacing — 4px grid ═════════════════════════════════════════ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-12: 8rem; /* 128 */ /* ══ 1f. Radius / elevation ═════════════════════════════════════════ */ --s2-r-sm: 8px; --s2-r-md: 12px; --s2-r-lg: 16px; --s2-r-xl: 20px; --s2-r-pill: 999px; --s2-sh-1: 0 1px 2px rgba(28, 25, 23, .04); --s2-sh-2: 0 4px 16px rgba(28, 25, 23, .07); --s2-sh-3: 0 16px 40px rgba(28, 25, 23, .12); /* ══ 1g. Layout ═════════════════════════════════════════════════════ */ /* Same content width as ksport: a 1240px box (1450px from 1550px up, below) with a 12px gutter at every size. */ --s2-container: 1240px; --s2-narrow: 720px; --s2-gutter: 12px; --s2-side-w: 280px; /* filter rail */ --s2-card-min: 160px; /* product grid track floor */ --s2-card-max: 180px; /* ══ 1h. Controls ═══════════════════════════════════════════════════ */ --s2-hit: 44px; /* minimum touch target */ --s2-btn-h: 44px; --s2-input-h: 44px; /* ══ 1i. Focus / disabled ═══════════════════════════════════════════ */ --s2-focus: var(--s2-ink); --s2-focus-ring: 0 0 0 3px rgba(28, 25, 23, .18); --s2-disabled-o: .5; /* ══ 1j. Motion ═════════════════════════════════════════════════════ */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } @media (min-width: 768px) { .shop-002-page { --s2-card-min: 200px; --s2-card-max: 220px; } } @media (min-width: 1280px) { .shop-002-page { --s2-card-min: 220px; --s2-card-max: 235px; } } @media (min-width: 1550px) { .shop-002-page { --s2-container: 1450px; } } /* ───────────────────────────────────────────────────────────────────────── 2. THEME SCOPE / BASE Deliberately tiny. The header, footer and menu are finished Tailwind components — this must not reach into them. ───────────────────────────────────────────────────────────────────────── */ /* ========================================================= START FOOTER ========================================================= */ .s2-footer { position: relative; margin-top: 150px; padding-bottom: 20px; /* background: linear-gradient(90deg, #310812 0%, #330612 45%, #330612 50%, #310812 55%, #000000 100%); */ background: linear-gradient(90deg, #050102 0%, #21070d 100%); color: #fff; direction: rtl; display: flex; justify-content: center; } /* ========================================================= SUPPORT CARD ========================================================= */ .s2-footer-support { position: relative; transform: translateY(-55px); min-height: 100px; margin-bottom: 0px; overflow: hidden; border-radius: 30px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #050102 0%, #21070d 100%); } .s2-footer-support-inner { position: relative; z-index: 1; width: 100%; padding: 0 35px; text-align: center; text-align: center; display: flex; justify-content: space-between; } .s2-footer-support h2 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.8; } .s2-footer-support-info { display: flex; align-items: center; justify-content: center; gap: 70px; color: #fff; font-size: 15px; } .s2-footer-support-item { display: flex; align-items: center; gap: 7px; } .s2-footer-support-item i { font-size: 18px; color: #2f1764; } .s2-footer-support-phones { display: flex; align-items: center; gap: 8px; } .s2-footer-support-phones a { color: #fff; text-decoration: none; transition: color 0.2s ease; } .s2-footer-support-phones a:hover { color: #e1306c; } /* ========================================================= MAIN CONTENT ========================================================= */ .s2-footer-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(220px, 1fr); gap: 45px; padding: 0 30px; } .s2-footer-main h2 { margin: 0 0 12px; color: #fff; font-size: 25px; font-weight: 700; } .s2-footer-heading-line { width: 45px; height: 3px; margin-bottom: 20px; border-radius: 20px; background: #9f1239; } /* ========================================================= ABOUT ========================================================= */ .s2-footer-about { min-width: 0; } .s2-footer-about p { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 16px; line-height: 2.15; text-align: justify; } .s2-footer-address { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1.9; } .s2-footer-address i { flex-shrink: 0; margin-top: 4px; color: #a27aff; } /* ========================================================= WHY US ========================================================= */ .s2-footer-why-list ul { margin: 0; padding: 0; list-style: none; } .s2-footer-why-list li { position: relative; margin-bottom: 13px; padding-right: 18px; color: #fff; font-size: 15px; line-height: 1.8; } .s2-footer-why-list li::before { content: ""; position: absolute; right: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #e1306c; } .s2-footer-why-list li a { color: #fff; text-decoration: none; transition: color 0.2s ease, padding-right 0.2s ease; } .s2-footer-why-list li a:hover { color: #c4a8ff; padding-right: 4px; } /* ========================================================= CERTIFICATES ========================================================= */ .s2-footer-certificates { min-width: 0; } .s2-footer-certificate-title { width: 45px; height: 3px; margin-bottom: 20px; border-radius: 20px; background: #9f1239; } .s2-footer-badges { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; } .s2-footer-badges>* { flex: 1; min-width: 0; } .s2-footer-badges img { display: block; max-width: 100%; width: auto; height: 115px; object-fit: contain; margin: auto; } /* ========================================================= NEWSLETTER + SOCIAL ========================================================= */ .s2-footer-bottom-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 15px; } .s2-footer-newsletter, .s2-footer-social-box { min-height: 100px; padding: 18px 22px; border-radius: 15px; background: linear-gradient(90deg, #050102 0%, #21070d 100%); } .s2-footer-social-box { background: linear-gradient(90deg, #050102 0%, #21070d 100%); } .s2-footer-box-title { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #fff; font-size: 15px; } .s2-footer-box-title i { color: #d6c4ff; font-size: 18px; } /* ========================================================= NEWSLETTER FORM ========================================================= */ .s2-footer-newsletter-form { display: flex; align-items: center; gap: 8px; width: 100%; } .s2-footer-newsletter-form input { flex: 1; width: 100%; height: 42px; padding: 0 18px; border: 0; outline: none; border-radius: 25px; background: #fff; color: #333; font-size: 14px; } .s2-footer-newsletter-form input::placeholder { color: #888; } .s2-footer-newsletter-form input:focus { box-shadow: 0 0 0 2px rgba(162, 122, 255, 0.4); } .s2-footer-newsletter-form button { flex: 0 0 95px; height: 42px; padding: 0 18px; border: none; border-radius: 25px; background: #e1306c; color: #fff; cursor: pointer; font-size: 15px; transition: transform 0.2s ease, background 0.2s ease; } .s2-footer-newsletter-form button:hover { background: #d02761; transform: translateY(-1px); } .s2-footer-newsletter-message { margin: 7px 5px 0; min-height: 20px; font-size: 12px; color: #fff; } /* ========================================================= SOCIALS ========================================================= */ .s2-footer-social-list { display: flex; align-items: center; gap: 15px; } .s2-footer-social-list a { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-size: 14px; transition: transform 0.2s ease, opacity 0.2s ease; } .s2-footer-social-list a:hover { transform: translateY(-2px); opacity: 0.85; } .s2-footer-social-list a i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 15px; } /* ========================================================= COPYRIGHT ========================================================= */ .s2-footer-copyright { margin-top: 30px; } .s2-footer-copyright-line { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.7); } .s2-footer-copyright-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 15px; } .s2-footer-copyright-content p { margin: 0; color: #fff; font-size: 14px; } .s2-footer-back-top { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #fff; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; font-size: 14px; transition: background 0.2s ease, color 0.2s ease; } .s2-footer-back-top:hover { background: #fff; color: #2c1c5b; } .s2-footer-back-top i { font-size: 16px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .s2-footer { margin-top: 90px; } .s2-footer-main { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.8fr) minmax(260px, 1fr); gap: 35px; } .s2-footer-support-info { gap: 45px; } .s2-footer-badges { gap: 10px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .s2-footer { margin-top: 80px; } .s2-footer-support { min-height: 180px; border-radius: 25px; } .s2-footer-support-inner { padding: 25px; } .s2-footer-support h2 { font-size: 21px; } .s2-footer-support-info { gap: 25px; } .s2-footer-main { grid-template-columns: 1fr 1fr; gap: 35px; } .s2-footer-about { grid-column: 1 / -1; } .s2-footer-certificates { grid-column: 1 / -1; } .s2-footer-badges { justify-content: flex-start; } .s2-footer-badges>* { max-width: 180px; } .s2-footer-bottom-row { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .s2-footer { margin-top: 70px; } .s2-footer-support { transform: translateY(-70px); min-height: auto; margin-bottom: -40px; border-radius: 20px; } .s2-footer-support-inner { padding: 25px 18px; } .s2-footer-support h2 { margin-bottom: 15px; font-size: 18px; line-height: 1.8; } .s2-footer-support-info { flex-direction: column; gap: 10px; font-size: 13px; } .s2-footer-main { grid-template-columns: 1fr; gap: 30px; } .s2-footer-about { grid-column: auto; } .s2-footer-certificates { grid-column: auto; } .s2-footer-main h2 { font-size: 21px; } .s2-footer-about p { font-size: 14px; line-height: 2; } .s2-footer-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .s2-footer-badges>* { max-width: none; } .s2-footer-badges img { height: 90px; } .s2-footer-social-list { flex-wrap: wrap; justify-content: flex-start; gap: 14px 25px; } .s2-footer-copyright-content { flex-direction: column; align-items: center; text-align: center; gap: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .s2-footer { margin-top: 60px; } .s2-footer-support { transform: translateY(-55px); margin-bottom: -30px; border-radius: 16px; } .s2-footer-support-inner { padding: 20px 15px; } .s2-footer-support h2 { font-size: 16px; } .s2-footer-support-info { align-items: stretch; font-size: 12px; } .s2-footer-support-item { justify-content: center; flex-wrap: wrap; } .s2-footer-main { gap: 25px; } .s2-footer-main h2 { font-size: 19px; } .s2-footer-heading-line, .s2-footer-certificate-title { margin-bottom: 15px; } .s2-footer-why-list li { font-size: 14px; } .s2-footer-badges { grid-template-columns: repeat(3, 1fr); } .s2-footer-badges img { height: 75px; } .s2-footer-newsletter, .s2-footer-social-box { padding: 16px; } .s2-footer-box-title { font-size: 13px; line-height: 1.8; } .s2-footer-newsletter-form { gap: 6px; } .s2-footer-newsletter-form input { height: 40px; padding: 0 12px; font-size: 12px; } .s2-footer-newsletter-form button { flex: 0 0 70px; height: 40px; padding: 0 10px; font-size: 13px; } .s2-footer-social-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .s2-footer-social-list a { font-size: 12px; } .s2-footer-social-list a i { width: 26px; height: 26px; } .s2-footer-copyright-content p { font-size: 12px; line-height: 1.8; } .s2-footer-back-top { font-size: 12px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .s2-footer-support h2 { font-size: 15px; } .s2-footer-support-info { font-size: 11px; } .s2-footer-badges { gap: 6px; } .s2-footer-badges img { height: 65px; } .s2-footer-social-list { grid-template-columns: 1fr; } } /* ========================================================= FOOTER TYPE SCALE One scale for the whole footer, after every breakpoint above so it wins. The rules above went from 25px headings down to 11px text, and the footer menu links were Tailwind's text-xs (12px). Google's mobile check wants no text under 12px; body text reads best at 14px on a dark footer, headings a step up, fine print a step down. Nothing here drops below 13px. ========================================================= */ .s2-footer-support h2, .s2-footer-main h2 { font-size: 18px; line-height: 1.6; } .s2-footer-about p, .s2-footer-address, .s2-footer-why-list li, .s2-footer-support-info, .s2-footer-support-item, .s2-footer-box-title, .s2-footer-social-list a, .s2-footer-newsletter-form input, .s2-footer-newsletter-form button, .f26-menu a { font-size: 14px; line-height: 1.9; } /* Footer links sit in a list with a small gap; a taller line gives each one a tap target Google does not flag as "too close". */ .f26-menu a { display: inline-block; padding-block: 4px; } .s2-footer-newsletter-message, .s2-footer-copyright-content p, .s2-footer-back-top { font-size: 13px; } @media (max-width: 767px) { .s2-footer-support h2, .s2-footer-main h2 { font-size: 16px; } } .shop-002-page { background: var(--s2-canvas); color: var(--s2-body); font-family: var(--s2-ff); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls); -webkit-font-smoothing: antialiased; } /* YekanBakh is already a FaNum face, so this only needs to stop inheriting a different family. Kept because Razor views across the theme use it. */ .shop-002-page .num-fa { font-family: var(--s2-ff); font-feature-settings: "tnum"; } /* ───────────────────────────────────────────────────────────────────────── 3. LAYOUT ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .s2-container { width: 100%; max-width: var(--s2-container); margin-inline: auto; padding-inline: var(--s2-gutter); } .shop-002-page .shop-page { padding-block: var(--space-5) var(--space-10); } /* Filter rail + results. Replaces .row/.col-lg-3/.col-lg-9, which do not exist in this theme at all — Bootstrap is not loaded here, so the old markup had no grid whatsoever and every block stacked full width. */ .shop-002-page .shop-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1024px) { .shop-002-page .shop-layout { grid-template-columns: var(--s2-side-w) minmax(0, 1fr); gap: var(--space-6); } } .shop-002-page .shop-layout-main { min-width: 0; } /* ───────────────────────────────────────────────────────────────────────── 4. BREADCRUMB ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .shop-breadcrumb { padding-block: var(--space-3); border-bottom: 1px solid var(--s2-hairline); background: var(--s2-surface); } .shop-002-page .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-body-sm); } .shop-002-page .breadcrumb-item { color: var(--s2-muted); } .shop-002-page .breadcrumb-item a { color: var(--s2-muted); text-decoration: none; } .shop-002-page .breadcrumb-item a:hover { color: var(--s2-link); } .shop-002-page .breadcrumb-item.active { color: var(--s2-ink); font-family: var(--s2-ff-med); } .shop-002-page .dash-breadcrumb { margin-bottom: var(--space-4); } .shop-002-page .breadcrumb-item+.breadcrumb-item::before { content: "/"; margin-inline-end: var(--space-2); color: var(--s2-hairline-strong); } /* ───────────────────────────────────────────────────────────────────────── 5. PAGE HEAD / SORT BAR ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .shop-h1 { font-family: var(--s2-ff-black); font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--s2-ink); margin: 0 0 var(--space-4); } .shop-002-page .shop-sort-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--s2-surface); border-radius: var(--s2-r-lg); box-shadow: var(--s2-sh-1); } .shop-002-page .sort-result-count { font-size: var(--fs-body-sm); color: var(--s2-muted); } .shop-002-page .sort-result-count strong { font-family: var(--s2-ff-bold); color: var(--s2-ink); } .shop-002-page .sort-options { display: flex; align-items: center; flex-wrap: wrap; /* سه قرصِ مرتب‌سازیِ وبلاگ کنارِ هم از عرضِ گوشی می‌زنند بیرون */ row-gap: var(--space-2); gap: var(--space-2); } .shop-002-page .sort-options>label { font-size: var(--fs-body-sm); color: var(--s2-muted); } .shop-002-page .sort-select { height: var(--s2-input-h); padding-inline: var(--space-3) var(--space-7); border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-ink); font-family: var(--s2-ff); font-size: var(--fs-body-sm); cursor: pointer; } .shop-002-page .view-toggle-btns { display: flex; gap: var(--space-1); } .shop-002-page .btn-view { width: var(--s2-hit); height: var(--s2-hit); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .shop-002-page .btn-view:hover { color: var(--s2-ink); } .shop-002-page .btn-view.active { background: var(--color-primary-50); border-color: var(--color-primary-200); color: var(--color-primary-600); } /* ───────────────────────────────────────────────────────────────────────── 6. FILTER RAIL ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .shop-sidebar { display: flex; flex-direction: column; gap: var(--space-3); } .shop-002-page .sidebar-widget { background: var(--s2-surface); border-radius: var(--s2-r-lg); padding: var(--space-4); box-shadow: var(--s2-sh-1); } .shop-002-page .sidebar-widget-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--s2-ff-med); font-size: var(--fs-body); color: var(--s2-ink); } .shop-002-page .sidebar-widget-title i { flex-shrink: 0; width: 20px; text-align: center; color: var(--s2-muted); font-size: 1em; line-height: 1; } /* search inside the rail */ .shop-002-page .s2-field { position: relative; display: block; } .shop-002-page .s2-field-icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--s2-muted); pointer-events: none; } .shop-002-page .s2-input { width: 100%; height: var(--s2-input-h); padding-inline: var(--space-8) var(--space-3); border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-ink); font-family: var(--s2-ff); font-size: var(--fs-body-sm); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .shop-002-page .s2-input::placeholder { color: var(--s2-muted); } /* category accordion */ .shop-002-page .cat-acc { display: flex; flex-direction: column; gap: 2px; } .shop-002-page .cat-acc-link, .shop-002-page .cat-acc-header, .shop-002-page .cat-acc-sublink { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: var(--s2-hit); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--s2-r-sm); background: transparent; color: var(--s2-body); font-family: var(--s2-ff); font-size: var(--fs-body-sm); text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .shop-002-page .cat-acc-link:hover, .shop-002-page .cat-acc-header:hover, .shop-002-page .cat-acc-sublink:hover { background: var(--s2-sunken); color: var(--s2-ink); } .shop-002-page .cat-acc-link.active, .shop-002-page .cat-acc-header.active, .shop-002-page .cat-acc-sublink.active { background: var(--color-primary-50); color: var(--color-primary-600); font-family: var(--s2-ff-med); } .shop-002-page .cat-acc-name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-002-page .cat-acc-name i { flex-shrink: 0; width: 20px; text-align: center; font-size: 1.05em; line-height: 1; color: var(--s2-muted); } .shop-002-page .cat-acc-link.active .cat-acc-name i, .shop-002-page .cat-acc-header.active .cat-acc-name i { color: inherit; } .shop-002-page .cat-acc-arrow { flex-shrink: 0; width: 20px; text-align: center; color: var(--s2-muted); transition: transform var(--dur) var(--ease); } .shop-002-page .cat-acc-link::before { content: ""; flex-shrink: 0; width: 20px; } .shop-002-page .cat-acc-link>.cat-count, .shop-002-page .cat-acc-header>.cat-count, .shop-002-page .cat-acc-sublink>.cat-count { margin-inline-start: auto; } .shop-002-page .cat-count { flex-shrink: 0; font-size: var(--fs-caption); color: var(--s2-muted); } .shop-002-page .cat-acc-arrow { transition: transform var(--dur) var(--ease); color: var(--s2-muted); } .shop-002-page .cat-acc-item.open>.cat-acc-header .cat-acc-arrow { transform: rotate(180deg); } .shop-002-page .cat-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .shop-002-page .cat-acc-item.open>.cat-acc-panel { grid-template-rows: 1fr; } .shop-002-page .cat-acc-panel>.cat-acc-sub { overflow: hidden; } .shop-002-page .cat-acc-sub { padding-inline-start: var(--space-3); } /* price range */ .shop-002-page .price-slider { --thumb: 20px; position: relative; height: 36px; margin-bottom: var(--space-3); } .shop-002-page .price-slider-rail { position: absolute; inset-inline: calc(var(--thumb) / 2); top: 50%; height: 6px; transform: translateY(-50%); border-radius: var(--s2-r-pill); background: var(--s2-sunken); box-shadow: inset 0 0 0 1px var(--s2-hairline); } .shop-002-page .price-slider-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--s2-r-pill); background: var(--s2-ink); } .shop-002-page .price-slider-handle { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 36px; margin: 0; background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; } .shop-002-page .price-slider-handle::-webkit-slider-thumb { pointer-events: auto; appearance: none; -webkit-appearance: none; width: var(--thumb, 20px); height: var(--thumb, 20px); border-radius: 50%; border: 2px solid var(--s2-ink); background: var(--s2-surface); box-shadow: var(--s2-sh-1); cursor: grab; transition: box-shadow var(--dur-fast) var(--ease); } .shop-002-page .price-slider-handle::-moz-range-thumb { pointer-events: auto; width: var(--thumb, 20px); height: var(--thumb, 20px); border-radius: 50%; border: 2px solid var(--s2-ink); background: var(--s2-surface); cursor: grab; } .shop-002-page .price-slider-handle:focus-visible::-webkit-slider-thumb { box-shadow: var(--s2-focus-ring); } .shop-002-page .price-slider-handle { accent-color: transparent; } .shop-002-page .price-slider-handle::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; } .shop-002-page .price-slider-handle::-moz-range-track { height: 100%; background: transparent; border: 0; } .shop-002-page .price-slider-handle::-moz-range-progress { background: transparent; } .shop-002-page .price-slider-handle::-webkit-slider-thumb { margin-top: calc((36px - var(--thumb, 20px)) / 2); } .shop-002-page .price-slider-handle:focus-visible::-moz-range-thumb { box-shadow: var(--s2-focus-ring); } .shop-002-page .price-slider-bounds { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-3); font-size: var(--fs-caption); color: var(--s2-muted); font-variant-numeric: tabular-nums; } .shop-002-page .price-range-inputs { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .shop-002-page .price-range-inputs input { min-width: 0; flex: 1; height: var(--s2-input-h); padding-inline: var(--space-3); border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-ink); font-family: var(--s2-ff); font-size: var(--fs-body-sm); text-align: center; } .shop-002-page .price-range-inputs span { flex-shrink: 0; font-size: var(--fs-caption); color: var(--s2-muted); } /* checkbox rows */ .shop-002-page .sidebar-checkbox-label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--s2-hit); padding-inline: var(--space-1); font-size: var(--fs-body-sm); color: var(--s2-body); cursor: pointer; } .shop-002-page .sidebar-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-primary-500); cursor: pointer; } .shop-002-page .attr-filter-name { flex: 1; min-width: 0; } .shop-002-page .attr-color-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--s2-hairline-strong); } /* attribute groups */ .shop-002-page .attr-filter-title { justify-content: space-between; min-height: var(--s2-hit); margin-bottom: 0; cursor: pointer; } .shop-002-page .attr-filter-arrow { transition: transform var(--dur) var(--ease); color: var(--s2-muted); } .shop-002-page .attr-filter.open .attr-filter-arrow { transform: rotate(180deg); } .shop-002-page .attr-filter-body { display: none; padding-top: var(--space-2); } .shop-002-page .attr-filter.open .attr-filter-body { display: block; } /* ───────────────────────────────────────────────────────────────────────── 7. MOBILE FILTER SHEET ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .filter-trigger { display: none; } @media (max-width: 1023.98px) { .shop-002-page .filter-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--s2-hit); padding-inline: var(--space-4); border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-ink); font-family: var(--s2-ff-med); font-size: var(--fs-body-sm); cursor: pointer; } .shop-002-page .filter-trigger-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--s2-r-pill); background: var(--color-primary-500); color: #fff; font-size: var(--fs-caption); } .shop-002-page .shop-layout-side, .shop-002-page .blog-layout-side { position: fixed; inset: 0; z-index: 100001; display: none; } .shop-002-page .shop-layout-side.is-open, .shop-002-page .blog-layout-side.is-open { display: block; } .shop-002-page .shop-layout-side::before, .shop-002-page .blog-layout-side::before { content: ""; position: absolute; inset: 0; background: rgba(28, 25, 23, .48); } .shop-002-page .shop-sidebar { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 380px); overflow-y: auto; gap: var(--space-3); padding: var(--space-4); padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px)); background: var(--s2-canvas); box-shadow: var(--s2-sh-3); animation: s2-sheet-in var(--dur) var(--ease-out); } .shop-002-page .filter-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--s2-hairline); } .shop-002-page .filter-sheet-foot { position: sticky; bottom: 0; display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); background: var(--s2-canvas); } } @media (min-width: 1024px) { .shop-002-page .filter-sheet-head, .shop-002-page .filter-sheet-foot { display: none; } } @keyframes s2-sheet-in { from { transform: translateX(-8%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ───────────────────────────────────────────────────────────────────────── 8. PRODUCT GRID Track count comes from the real container width, not from breakpoints, so it stays correct whether the filter rail is present or not. ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .product-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(var(--s2-card-min), 1fr)); } @media (min-width: 768px) { .shop-002-page .product-grid { gap: var(--space-5); } } /* list view (the sort bar toggles this class) */ .shop-002-page .product-grid-list { grid-template-columns: 1fr; } @media (min-width: 640px) { .shop-002-page .product-grid-list .product-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; } .shop-002-page .product-grid-list .product-card-foot { align-self: end; } } /* ───────────────────────────────────────────────────────────────────────── 9. PRODUCT CARD ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .product-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid transparent; /* reserved so hover does not reflow */ border-radius: var(--s2-r-lg); background: var(--s2-surface); transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } @media (hover: hover) { .shop-002-page .product-card:hover { transform: translateY(-2px); border-color: var(--s2-hairline-strong); box-shadow: var(--s2-sh-2); } .shop-002-page .product-card:hover .product-card-img { transform: scale(1.03); } } .shop-002-page .product-card:focus-within { border-color: var(--s2-focus); box-shadow: var(--s2-focus-ring); } .shop-002-page .product-card-link { display: block; padding: var(--space-3); color: inherit; text-decoration: none; flex-grow: 1; } .shop-002-page .product-card-media { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; margin-bottom: var(--space-3); border-radius: var(--s2-r-md); background: var(--s2-sunken); overflow: hidden; } .shop-002-page .product-card-img { width: 78%; height: auto; transition: transform var(--dur-slow) var(--ease-out); } /* badges — top-start, at most one visible at a time by design */ .shop-002-page .product-card-badges { position: absolute; inset-inline-start: var(--space-2); top: var(--space-2); z-index: 2; display: flex; flex-direction: column; gap: var(--space-1); } .shop-002-page .product-badge { padding: 2px var(--space-2); border-radius: var(--s2-r-sm); font-size: var(--fs-caption); line-height: 1.6; color: #fff; } .shop-002-page .product-badge-soon { background: var(--s2-warning); } .shop-002-page .product-badge-out { background: var(--s2-muted); } .shop-002-page .product-card .fav-btn { position: absolute; inset-inline-end: var(--space-2); top: var(--space-2); z-index: 2; width: var(--s2-hit); height: var(--s2-hit); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--s2-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .shop-002-page .fav-btn:hover { color: var(--s2-danger); background: #fff; } .shop-002-page .product-card-rating { display: flex; align-items: center; gap: var(--space-1); min-height: 1.2em; font-size: var(--fs-caption); color: var(--s2-muted); } .shop-002-page .product-card-rating svg { fill: var(--s2-star); } .shop-002-page .product-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; margin-top: var(--space-2); font-size: var(--fs-body); line-height: 1.4; color: var(--s2-ink); } .shop-002-page .product-card-colors { display: flex; align-items: center; gap: var(--space-1); min-height: 10px; margin-top: var(--space-2); } .shop-002-page .product-card-color { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--s2-hairline-strong); } .shop-002-page .product-card-color-more { font-size: var(--fs-caption); color: var(--s2-muted); } .shop-002-page .card-offer-timer { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--s2-sale); } /* ── 10. PRICING ──────────────────────────────────────────────────────── */ .shop-002-page .product-card-foot { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-3) var(--space-3); } .shop-002-page .product-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 2.9em; } /* Struck-through price + discount on top, final price under it. The top row keeps its height when empty so discounted and full-price cards stay the same height. */ .shop-002-page .product-price-old, .shop-002-page .product-price-final { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); } .shop-002-page .product-price-old { min-height: 1.7em; font-size: var(--fs-caption); } .shop-002-page .product-price-now { font-family: var(--s2-ff-black); font-size: var(--fs-body-lg); color: var(--s2-price); } .shop-002-page .product-price-unit { font-size: var(--fs-caption); color: var(--s2-muted); } .shop-002-page .product-price-from { font-size: var(--fs-caption); color: var(--s2-muted); } .shop-002-page .product-price-was { font-size: var(--fs-caption); color: var(--s2-muted); text-decoration: line-through; } .shop-002-page .product-discount { padding: 1px var(--space-2); border-radius: var(--s2-r-pill); background: var(--s2-sale); color: #fff; font-family: var(--s2-ff-med); font-size: var(--fs-caption); } .shop-002-page .product-price-note { display: flex; align-items: center; min-height: 2.9em; font-family: var(--s2-ff-med); font-size: var(--fs-body); color: var(--s2-ink); } /* ───────────────────────────────────────────────────────────────────────── 11. BUTTONS / CTA ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .s2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--s2-btn-h); padding-inline: var(--space-4); border: 1px solid transparent; border-radius: var(--s2-r-md); font-family: var(--s2-ff-med); font-size: var(--fs-body-sm); line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* primary = buy. The only orange on the page. */ .shop-002-page .s2-btn-buy { width: 100%; background: var(--s2-buy); color: var(--s2-buy-ink); /* navy on orange — 5.60:1 */ font-family: var(--s2-ff-bold); } .shop-002-page .s2-btn-buy:hover { background: var(--s2-buy-hover); } /* secondary */ .shop-002-page .s2-btn-secondary { background: var(--s2-surface); border-color: var(--s2-hairline-strong); color: var(--s2-ink); } .shop-002-page .s2-btn-secondary:hover { background: var(--s2-sunken); } /* solid blue — informational primary (apply filter, etc.) */ .shop-002-page .s2-btn-primary { background: var(--color-primary-500); color: #fff; } .shop-002-page .s2-btn-primary:hover { background: var(--color-primary-600); } /* tertiary */ .shop-002-page .s2-btn-quiet { min-height: var(--s2-hit); padding-inline: var(--space-2); background: transparent; color: var(--s2-link); } .shop-002-page .s2-btn-quiet:hover { text-decoration: underline; } .shop-002-page .price-range-btn { width: 100%; min-height: var(--s2-btn-h); border: 0; border-radius: var(--s2-r-md); background: var(--color-primary-500); color: #fff; font-family: var(--s2-ff-med); font-size: var(--fs-body-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); } .shop-002-page .price-range-btn:hover { background: var(--color-primary-600); } .shop-002-page .s2-btn:disabled, .shop-002-page .price-range-btn:disabled { opacity: var(--s2-disabled-o); cursor: not-allowed; } /* ───────────────────────────────────────────────────────────────────────── 12. ACTIVE FILTER CHIPS ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .shop-002-page .filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding-inline: var(--space-3); border-radius: var(--s2-r-pill); background: var(--color-primary-50); color: var(--color-primary-700); font-size: var(--fs-caption); text-decoration: none; } .shop-002-page .filter-chip:hover { background: var(--color-primary-100); } /* ───────────────────────────────────────────────────────────────────────── 13. PAGINATION ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .shop-pagination { margin-top: var(--space-7); } .shop-002-page .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .shop-002-page .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--s2-hit); height: var(--s2-hit); padding-inline: var(--space-2); border: 1px solid var(--s2-hairline-strong); border-radius: var(--s2-r-md); background: var(--s2-surface); color: var(--s2-body); font-size: var(--fs-body-sm); text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .shop-002-page .page-link:hover { border-color: var(--color-primary-300); color: var(--s2-ink); } .shop-002-page .page-item.active .page-link { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; /* 5.36:1 */ font-family: var(--s2-ff-med); } /* ───────────────────────────────────────────────────────────────────────── 14. SEO CONTENT BLOCKS ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .shop-seo-text, .shop-002-page .shop-seo-faq { margin-top: var(--space-8); padding: var(--space-5); border-radius: var(--s2-r-lg); background: var(--s2-surface); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--s2-body); } .shop-002-page .shop-seo-faq h2 { margin: 0 0 var(--space-4); font-family: var(--s2-ff-bold); font-size: var(--fs-h3); color: var(--s2-ink); } .shop-002-page .seo-faq-item { padding-block: var(--space-3); border-bottom: 1px solid var(--s2-hairline); } .shop-002-page .seo-faq-item summary { min-height: var(--s2-hit); display: flex; align-items: center; font-family: var(--s2-ff-med); color: var(--s2-ink); cursor: pointer; } .shop-002-page .seo-faq-answer { padding-top: var(--space-2); color: var(--s2-body); } /* Metn-e SEO az panel miayad (Html.Raw), pas hich class-i nadarad. Style bar rooye tag-haye khaam gozashte mishavad. */ .shop-002-page .shop-seo-text> :first-child { margin-top: 0; } .shop-002-page .shop-seo-text> :last-child { margin-bottom: 0; } .shop-002-page .shop-seo-text h2, .shop-002-page .shop-seo-text h3, .shop-002-page .shop-seo-text h4 { margin: var(--space-6) 0 var(--space-3); font-family: var(--s2-ff-bold); line-height: var(--lh-heading); color: var(--s2-ink); } .shop-002-page .shop-seo-text h2 { font-size: var(--fs-h3); } .shop-002-page .shop-seo-text h3 { font-size: var(--fs-body-lg); } .shop-002-page .shop-seo-text h4 { font-size: var(--fs-body); } .shop-002-page .shop-seo-text p { margin: 0 0 var(--space-3); } .shop-002-page .shop-seo-text a { color: var(--s2-link); } .shop-002-page .shop-seo-text img { max-width: 100%; height: auto; border-radius: var(--s2-r-md); } .shop-002-page .shop-seo-text ul, .shop-002-page .shop-seo-text ol { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); } .shop-002-page .shop-seo-text li { margin-bottom: var(--space-2); } /* Jadval: aksar-e in jadval-ha az Word ya editor-e panel copy mishavand va attribute-e width/border-e khodeshan ra hamrah darand -> reset. */ .shop-002-page .shop-seo-text table { display: block; /* ta rooye mobile khodesh scroll shavad */ width: max-content; max-width: 100%; overflow-x: auto; margin: var(--space-5) 0; border-collapse: collapse; font-size: var(--fs-body-sm); text-align: right; } .shop-002-page .shop-seo-text table th, .shop-002-page .shop-seo-text table td { padding: var(--space-2) var(--space-3); border: 1px solid var(--s2-hairline); vertical-align: middle; white-space: nowrap; } .shop-002-page .shop-seo-text table th { background: var(--color-primary-50); font-family: var(--s2-ff-med); color: var(--s2-ink); text-align: right; } /* Agar jadval thead nadashte bashad, satr-e aval naghsh-e header ra darad. */ .shop-002-page .shop-seo-text table:not(:has(thead)) tr:first-child td { font-family: var(--s2-ff-med); color: var(--s2-ink); } .shop-002-page .shop-seo-text table tbody tr:nth-child(even) { background: var(--s2-canvas); } .shop-002-page .shop-seo-text table caption { margin-bottom: var(--space-2); font-family: var(--s2-ff-med); color: var(--s2-muted); text-align: right; } .shop-002-page .shop-seo-text blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--color-primary-300); background: var(--s2-canvas); border-radius: var(--s2-r-sm); color: var(--s2-body); } /* ───────────────────────────────────────────────────────────────────────── 15. CART INTERACTION FEEDBACK product-card.js owns the request. This is presentation only. ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .product-card-add-btn.is-busy { pointer-events: none; opacity: .85; } .shop-002-page .product-card-add-btn.is-busy .s2-btn-icon { animation: s2-spin .7s linear infinite; } /* product-card.js adds .added on a successful /cart/add */ .shop-002-page .product-card-add-btn.added { background: var(--s2-success); color: #fff; /* 5.44:1 */ } @keyframes s2-spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────────────────── 16. EMPTY / LOADING STATES ───────────────────────────────────────────────────────────────────────── */ .shop-002-page .s2-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); border-radius: var(--s2-r-lg); background: var(--s2-surface); text-align: center; } .shop-002-page .s2-empty-icon { font-size: 2.5rem; color: var(--s2-hairline-strong); } .shop-002-page .s2-empty-title { font-family: var(--s2-ff-bold); font-size: var(--fs-h3); color: var(--s2-ink); } .shop-002-page .s2-empty-text { max-width: 42ch; font-size: var(--fs-body-sm); color: var(--s2-muted); } /* skeleton grid — shown while a filter request is in flight */ .shop-002-page .s2-skeleton-card { border-radius: var(--s2-r-lg); background: var(--s2-surface); padding: var(--space-3); } .shop-002-page .s2-skeleton-box { border-radius: var(--s2-r-md); background: linear-gradient(90deg, var(--s2-sunken) 25%, var(--s2-shimmer) 37%, var(--s2-sunken) 63%); background-size: 400% 100%; animation: s2-shimmer 1.4s ease infinite; } .shop-002-page .s2-skeleton-media { aspect-ratio: 1 / 1; margin-bottom: var(--space-3); } .shop-002-page .s2-skeleton-line { height: 12px; margin-bottom: var(--space-2); } .shop-002-page .s2-skeleton-line.is-short { width: 60%; } @keyframes s2-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } } .shop-002-page .is-loading-grid { opacity: .5; pointer-events: none; } /* ───────────────────────────────────────────────────────────────────────── 17. ACCESSIBILITY The bought template ships `*:focus{outline:transparent}` in tpl/assets/css/style.css, which removes the focus ring from every control in this theme. That rule is layer-free too, so this block restores a real focus indicator scoped to the theme. ───────────────────────────────────────────────────────────────────────── */ .shop-002-page :focus-visible { outline: 2px solid var(--s2-focus); outline-offset: 2px; border-radius: 4px; } .shop-002-page .s2-input:focus-visible, .shop-002-page .sort-select:focus-visible, .shop-002-page .price-range-inputs input:focus-visible { outline: none; border-color: var(--s2-focus); box-shadow: var(--s2-focus-ring); } .shop-002-page .s2-skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 10000; } .shop-002-page .s2-skip-link:focus { inset-inline-start: var(--space-4); top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--s2-r-md); background: var(--s2-surface); box-shadow: var(--s2-sh-3); } .shop-002-page .s2-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ───────────────────────────────────────────────────────────────────────── 18. REDUCED MOTION ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .shop-002-page *, .shop-002-page *::before, .shop-002-page *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; } .shop-002-page .product-card:hover { transform: none; } .shop-002-page .product-card:hover .product-card-img { transform: none; } } /* ═════════════════════════════════════════════════════════════════════════ HOME PAGE Every class below existed in the markup already but had no CSS anywhere in this theme: home.css is not linked, Bootstrap is not linked, and the Tailwind build is purged. So the whole page under the slider rendered unstyled. These are the missing definitions, not a re-skin. ═════════════════════════════════════════════════════════════════════════ */ /* ── 20. SECTION SHELL ─────────────────────────────────────────────────── */ .shop-002-page .home-section { margin-bottom: var(--space-8); } .shop-002-page .home-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .shop-002-page .home-sec-title { margin: 0; font-family: var(--s2-ff-black); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--s2-ink); } .shop-002-page .home-sec-more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--s2-hit); padding-inline: var(--space-2); color: var(--s2-link); font-size: var(--fs-body-sm); text-decoration: none; white-space: nowrap; } .shop-002-page .home-sec-more:hover { text-decoration: underline; } /* ── 21. TRUST / FEATURES BAR ──────────────────────────────────────────── */ .shop-002-page .home-features-bar { margin-block: var(--space-6); padding-block: var(--space-5); border-block: 1px solid var(--s2-hairline); background: var(--s2-surface); } .shop-002-page .hf-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .shop-002-page .hf-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .shop-002-page .hf-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--s2-r-md); background: var(--color-primary-50); color: var(--color-primary-600); font-size: 1.25rem; } .shop-002-page .hf-title { display: block; font-family: var(--s2-ff-med); font-size: var(--fs-body-sm); color: var(--s2-ink); } .shop-002-page .hf-sub { display: block; font-size: var(--fs-caption); color: var(--s2-muted); } /* ── 22. CATEGORY TILES ────────────────────────────────────────────────── */ .shop-002-page .hcat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); } .shop-002-page .hcat-item { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); border: 1px solid transparent; border-radius: var(--s2-r-lg); background: var(--s2-surface); color: var(--s2-body); text-align: center; text-decoration: none; transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } @media (hover: hover) { .shop-002-page .hcat-item:hover { transform: translateY(-2px); border-color: var(--s2-hairline-strong); box-shadow: var(--s2-sh-2); } } .shop-002-page .hcat-img { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--s2-sunken); color: var(--color-primary-600); font-size: 1.5rem; } .shop-002-page .hcat-img { overflow: hidden; } .shop-002-page .hcat-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-002-page .hcat-name { font-size: var(--fs-body-sm); line-height: 1.4; color: var(--s2-ink); } /* ── 23. PRODUCT RAIL (replaces the dead owl carousels) ──────────────────── The markup carried .owl-carousel, but neither owl.carousel.js nor jQuery is loaded in this theme, so those carousels never initialised and the cards simply stacked. A scroll-snap rail needs no library at all, and it is keyboard- and touch-native. */ .shop-002-page .product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--s2-card-min), var(--s2-card-max)); justify-content: start; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s2-gutter); padding-bottom: var(--space-2); overscroll-behavior-x: contain; scrollbar-width: thin; } .shop-002-page .product-rail>* { scroll-snap-align: start; } @media (min-width: 768px) { .shop-002-page .product-rail { grid-auto-columns: minmax(var(--s2-card-min), var(--s2-card-max)); gap: var(--space-5); } } .shop-002-page .home-offers-wrap { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--s2-hairline); border-radius: var(--s2-r-xl); background: var(--s2-surface); overflow: hidden; } @media (min-width: 1024px) { .shop-002-page .home-offers-wrap { grid-template-columns: 264px minmax(0, 1fr); } } .shop-002-page .home-offers-sidebar { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); background: var(--s2-ink); color: #fff; } .shop-002-page .home-offers-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); } .shop-002-page .home-offers-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--s2-r-md); background: var(--s2-buy); color: #fff; /* 5.05:1 */ font-size: 1.1rem; } .shop-002-page .home-offers-title { margin: 0; font-family: var(--s2-ff-black); font-size: var(--fs-h3); line-height: 1.35; color: #fff; } .shop-002-page .home-offers-more { grid-column: 1 / -1; display: inline-flex; align-items: center; align-self: start; min-height: 32px; color: rgba(255, 255, 255, .72); font-size: var(--fs-body-sm); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); justify-self: start; } .shop-002-page .home-offers-more:hover { color: #fff; border-bottom-color: #fff; } .shop-002-page .home-offers-more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .shop-002-page .home-offers-timer { display: grid; gap: var(--space-2); justify-items: start; } .shop-002-page .hot-label { padding: 3px var(--space-3); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--s2-r-pill); background: transparent; color: rgba(255, 255, 255, .85); font-size: var(--fs-caption); } .shop-002-page .timer-boxes { display: flex; align-items: stretch; gap: var(--space-1); } .shop-002-page .timer-box { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: var(--space-2) var(--space-1); border-radius: var(--s2-r-sm); background: rgba(255, 255, 255, .10); } .shop-002-page .timer-num { font-family: var(--s2-ff-bold); font-size: var(--fs-body-lg); line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; } .shop-002-page .timer-lbl { font-size: var(--fs-caption); color: rgba(255, 255, 255, .62); } .shop-002-page .timer-sep { align-self: center; color: rgba(255, 255, 255, .35); } .shop-002-page .home-offers-products { padding: var(--space-5); } @media (max-width: 1023.98px) { .shop-002-page .home-offers-sidebar { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3) var(--space-4); } .shop-002-page .home-offers-head { grid-column: 1; } .shop-002-page .home-offers-timer { grid-column: 2; justify-items: end; } .shop-002-page .home-offers-products { padding: var(--space-4); } } .shop-002-page .home-offers-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; } .shop-002-page .home-offers-empty>i { font-size: 2rem; color: var(--s2-hairline-strong); } .shop-002-page .home-offers-empty p { margin: 0; font-family: var(--s2-ff-med); font-size: var(--fs-body); color: var(--s2-ink); } .shop-002-page .home-offers-empty span { max-width: 46ch; font-size: var(--fs-body-sm); color: var(--s2-muted); } .shop-002-page .home-offers-empty-btn { margin-top: var(--space-2); display: inline-flex; align-items: center; min-height: var(--s2-btn-h); padding-inline: var(--space-4); border-radius: var(--s2-r-md); background: var(--color-primary-500); color: #fff; font-size: var(--fs-body-sm); text-decoration: none; } .shop-002-page .home-offers-empty-btn:hover { background: var(--color-primary-600); } /* ── 25. RECENTLY VIEWED ─────────────────────────────────────────────────── recently-viewed.js injects _ProductCarouselRow into .rv-body, and that partial now renders a .product-rail — so .rv-body itself is just a wrapper. It also calls window.initCarousels(), which does not exist in this theme; that is harmless (the call is guarded by typeof) and the rail needs no JS. */ .shop-002-page .rv-body { min-width: 0; } /* ── 25b. HERO SLIDER ────────────────────────────────────────────────────── Swiper 11 is already loaded and tpl/assets/js/sliders.js already inits `.heroSlider`, so the markup only had to adopt the swiper structure. Desktop/mobile art direction is done with