/* Theme Name: Jinusshop Theme URI: https://jinusshop.local Author: Jinusshop Description: قالب اختصاصی و سبک فروشگاه خشکبار و مواد غذایی صنایع غذایی ژینوس. طراحی‌شده برای سرعت، سادگی و خرید سریع. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: bashgah24 */ /* ===================== Self-hosted font ===================== */ /* Vazirmatn is bundled with the theme so the site never depends on Google Fonts staying reachable after migration to production. */ @font-face{ font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face{ font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face{ font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: 'Vazirmatn'; src: url('assets/fonts/vazirmatn-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* ===================== Design tokens ===================== */ :root{ --yellow: #C9A227; --yellow-dark: #A8841A; --black: #2E1A47; --true-black: #000000; --white: #FFFFFF; --gray-light: #F5F5F5; --gray-border: #E5E5E5; --gray-text: #666666; --danger: #D64545; --success: #1F9254; --radius: 12px; --radius-sm: 8px; --container: 1240px; --gap: 20px; --font: 'Vazirmatn', Tahoma, sans-serif; } /* ===================== Reset ===================== */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body{ margin: 0; font-family: var(--font); color: var(--black); background: var(--white); direction: rtl; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } button, input, select, textarea{ font-family: inherit; font-size: inherit; } button{ cursor: pointer; } h1,h2,h3,h4{ margin: 0 0 .5em; text-wrap: balance; font-weight: 800; } p{ margin: 0 0 1em; } :focus-visible{ outline: 2px solid var(--black); outline-offset: 2px; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 18px; } .skip-link{ position: absolute; right: -9999px; top: 0; background: var(--black); color: var(--yellow); padding: 10px 16px; z-index: 10000; border-radius: 0 0 8px 8px; } .skip-link:focus{ right: 0; } /* ===================== Buttons ===================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; font-weight: 700; font-size: 14px; padding: 12px 22px; transition: transform .15s ease, background .15s ease; white-space: nowrap; } .btn:active{ transform: scale(.97); } .btn-primary{ background: var(--yellow); color: var(--black); } .btn-primary:hover{ background: var(--yellow-dark); } .btn-dark{ background: var(--black); color: var(--white); } .btn-dark:hover{ background: #2a2a2a; } .btn-outline{ background: transparent; color: var(--black); border: 1.5px solid var(--black); } .btn-block{ width: 100%; } .btn-sm{ padding: 8px 14px; font-size: 12.5px; } .btn[disabled], .btn.disabled{ background: var(--gray-light); color: var(--gray-text); cursor: not-allowed; } /* ===================== Header ===================== */ .launch-banner{ background: var(--black); color: var(--white); } .launch-banner-inner{ display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; text-align: center; } .launch-banner-text{ font-size: 12.5px; font-weight: 600; } .launch-banner-text strong{ color: var(--yellow); font-weight: 800; } .launch-banner-close{ background: none; border: none; color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .7; } .launch-banner-close:hover{ opacity: 1; } @media (max-width: 600px){ .launch-banner-text{ font-size: 11.5px; } } .site-header{ position: sticky; top: 0; z-index: 500; background: var(--white); border-bottom: 1px solid var(--gray-border); } .header-top{ display: flex; align-items: center; gap: 18px; padding: 14px 0; } .site-logo{ font-weight: 800; font-size: 21px; letter-spacing: -.3px; flex: none; display: flex; align-items: center; gap: 9px; } .site-logo .mark{ width: 36px; height: 36px; object-fit: contain; flex: none; } .site-logo .txt{ color: var(--yellow-dark); } .footer-brand{ display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .footer-brand img{ width: 30px; height: 30px; object-fit: contain; flex: none; } .footer-brand .txt{ color: var(--white); font-weight: 800; font-size: 16px; } .footer-brand .txt span{ color: var(--yellow); } .header-search{ flex: 1; position: relative; max-width: 520px; } .header-search input{ width: 100%; border: 1.5px solid var(--gray-border); border-radius: 999px; padding: 11px 44px 11px 18px; background: var(--gray-light); } .header-search input:focus{ background: var(--white); border-color: var(--black); } .header-search .search-icon{ position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gray-text); pointer-events: none; } .header-actions{ display: flex; align-items: center; gap: 6px; flex: none; } .header-icon-btn{ position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--black); } .header-icon-btn:hover{ background: var(--gray-light); } .header-icon-btn svg{ width: 21px; height: 21px; } .cart-count{ position: absolute; top: 2px; inset-inline-end: 2px; background: var(--yellow); color: var(--black); font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid var(--white); } .header-nav{ border-top: 1px solid var(--gray-border); } .header-nav ul{ display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .header-nav ul::-webkit-scrollbar{ display: none; } .header-nav a{ display: block; padding: 12px 14px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--black); } .header-nav a:hover{ color: var(--yellow-dark); } .mobile-search{ display: none; padding: 10px 0 14px; } /* Mobile "دسته‌بندی محصولات" dropdown trigger -- replaces the horizontal scrolling nav on small screens with a conventional toggle + panel. */ .categories-bar{ display: none; } .categories-toggle{ display: none; width: 100%; align-items: center; gap: 10px; background: var(--gray-light); border: none; border-radius: 999px; padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--black); font-family: inherit; margin: 10px 0; } .categories-toggle svg{ width: 18px; height: 18px; flex: none; } .categories-toggle span{ flex: 1; text-align: start; } .categories-toggle .chev{ width: 16px; height: 16px; transition: transform .2s ease; } .categories-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); } @media (max-width: 880px){ .categories-bar{ display: block; } .categories-toggle{ display: flex; } .header-nav{ display: none; border-top: none; } .header-nav.is-open{ display: block; } .header-nav ul{ display: flex; flex-direction: column; gap: 0; overflow-x: visible; border: 1px solid var(--gray-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; } .header-nav a{ padding: 13px 16px; white-space: normal; border-bottom: 1px solid var(--gray-border); } .header-nav li:last-child a{ border-bottom: none; } } /* ===================== Live search dropdown ===================== */ .search-results{ position: absolute; top: calc(100% + 8px); right: 0; left: 0; background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.12); max-height: 70vh; overflow-y: auto; z-index: 600; display: none; } .search-results.is-open{ display: block; } .search-results .sr-item{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--gray-border); } .search-results .sr-item:last-child{ border-bottom: none; } .search-results .sr-item:hover{ background: var(--gray-light); } .search-results img{ width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; background: var(--gray-light); } .search-results .sr-info{ flex: 1; min-width: 0; } .search-results .sr-name{ font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-results .sr-price{ font-size: 12.5px; color: var(--gray-text); font-variant-numeric: tabular-nums; } .search-results .sr-empty, .search-results .sr-loading, .search-results .sr-viewall{ padding: 16px; text-align: center; font-size: 13px; color: var(--gray-text); } .search-results .sr-viewall{ font-weight: 700; color: var(--black); border-top: 1px solid var(--gray-border); } .search-results .sr-viewall:hover{ background: var(--gray-light); } .search-results .out-tag{ font-size: 10.5px; color: var(--danger); font-weight: 700; } /* ===================== Section shell ===================== */ .section{ padding: 40px 0; } .section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .section-head h2{ font-size: 22px; } .section-head .section-more{ font-size: 13px; font-weight: 700; color: var(--gray-text); white-space: nowrap; } .section-head .section-more:hover{ color: var(--black); } .section-sub{ color: var(--gray-text); font-size: 13.5px; margin: -12px 0 20px; } /* ===================== Hero ===================== */ .hero{ background: var(--black); border-radius: var(--radius); padding: 34px 26px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden; } .hero::before{ content: ''; position: absolute; inset-inline-end: -60px; top: -60px; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; opacity: .15; filter: blur(10px); } .hero-text{ position: relative; z-index: 1; max-width: 480px; } .hero-text .eyebrow{ color: var(--yellow); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; margin-bottom: 8px; display:block; } .hero-text h1{ color: var(--white); font-size: clamp(22px,4vw,30px); margin-bottom: 10px; } .hero-text p{ color: #C9C9C9; font-size: 14px; margin-bottom: 18px; } /* ===================== Category grid ===================== */ /* Flexbox, not CSS Grid: Chromium mis-places grid auto-placed items with direction:rtl + fractional (non-integer) track widths, silently leaving a column empty in some rows. Margin-based gutters, not the `gap` property: `gap` on a wrapping flex row combined with direction:rtl reproduces the same empty-column bug. Verified fix: no `gap`, spacing via margin-inline-end + :nth-child(Nn) to drop the last column's margin. */ .cat-grid{ display: flex; flex-wrap: wrap; } .cat-grid .cat-card{ flex: 0 0 calc(25% - 10.5px); min-width: 0; margin-inline-end: 14px; margin-bottom: 14px; } .cat-grid .cat-card:nth-child(4n){ margin-inline-end: 0; } @media (max-width: 900px){ .cat-grid .cat-card{ flex-basis: calc(33.3333% - 9.4px); margin-inline-end: 14px; } .cat-grid .cat-card:nth-child(4n){ margin-inline-end: 14px; } .cat-grid .cat-card:nth-child(3n){ margin-inline-end: 0; } } .cat-card{ background: var(--gray-light); border-radius: var(--radius); overflow: hidden; text-align: center; border: 1px solid var(--gray-border); transition: border-color .15s ease, transform .15s ease; } .cat-card:hover{ border-color: var(--yellow); transform: translateY(-2px); } .cat-card .cat-img{ aspect-ratio: 1/1; background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cat-card .cat-img img{ width: 100%; height: 100%; object-fit: contain; padding: 10px; } .cat-card .cat-body{ padding: 10px 8px 14px; } .cat-card .cat-name{ font-weight: 700; font-size: 13.5px; } .cat-card .cat-link{ font-size: 11px; color: var(--yellow-dark); font-weight: 700; margin-top: 3px; display: block; } /* ===================== Product grid & card ===================== */ /* .product-card is used both inside .product-grid (homepage sections) and inside ul.products (WooCommerce archive/related loop) -- one set of spacing/nth-child rules covers both since the breakpoints match. */ .product-grid{ display: flex; flex-wrap: wrap; } .product-card{ flex: 0 0 calc(25% - 15px); min-width: 0; margin-inline-end: 20px; margin-bottom: 20px; border: 1px solid var(--gray-border); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; position: relative; transition: box-shadow .15s ease, border-color .15s ease; } .product-card:nth-child(4n){ margin-inline-end: 0; } @media (max-width: 900px){ .product-card{ flex-basis: calc(33.3333% - 13.4px); margin-inline-end: 20px; } .product-card:nth-child(4n){ margin-inline-end: 20px; } .product-card:nth-child(3n){ margin-inline-end: 0; } } .product-card:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: #dcdcdc; } .product-card .pc-thumb{ display: block !important; position: relative !important; aspect-ratio: 1/1 !important; background: var(--gray-light); overflow: hidden; width: 100% !important; } .product-card .pc-thumb img{ position: absolute !important; inset: 14px !important; margin: 0 !important; width: calc(100% - 28px) !important; height: calc(100% - 28px) !important; max-width: calc(100% - 28px) !important; object-fit: contain; display: block !important; } .product-card.is-oos .pc-thumb img{ opacity: .45; filter: grayscale(60%); } .pc-badge{ position: absolute; top: 8px; inset-inline-start: 8px; background: var(--yellow); color: var(--black); font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; } .pc-badge.oos{ background: var(--black); color: var(--white); } .pc-badge.low{ background: var(--danger); color: var(--white); } .product-card .pc-body{ padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pc-cat{ font-size: 11px; color: var(--gray-text); font-weight: 600; } .pc-name{ font-size: 13.5px; font-weight: 700; line-height: 1.5; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc-name a{ color: var(--black); } .pc-price{ margin-top: auto; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; } .pc-price .old{ font-weight: 500; font-size: 12px; color: var(--gray-text); text-decoration: line-through; margin-inline-end: 6px; } .pc-actions{ margin-top: 4px; } .pc-actions .add_to_cart_button, .pc-actions .button{ display: block !important; width: 100%; text-align: center; background: var(--black) !important; color: var(--white) !important; border-radius: 999px !important; padding: 10px !important; font-size: 13px !important; font-weight: 700; transition: background .15s ease; border: none !important; box-shadow: none !important; } .pc-actions .add_to_cart_button:hover{ background: var(--yellow) !important; color: var(--black) !important; } .pc-actions .add_to_cart_button.loading{ opacity: .6; pointer-events: none; } .pc-actions .added_to_cart{ display: block; margin-top: 6px; text-align: center; font-size: 11.5px; color: var(--success); font-weight: 700; } .pc-actions .button.disabled, .pc-actions .add_to_cart_button.disabled{ background: var(--gray-light); color: var(--gray-text); pointer-events: none; } /* ===================== Articles ===================== */ .article-grid{ display: flex; flex-wrap: wrap; } .article-grid .article-card{ flex: 0 0 calc(33.3333% - 13.4px); min-width: 0; margin-inline-end: 20px; margin-bottom: 20px; } .article-grid .article-card:nth-child(3n){ margin-inline-end: 0; } @media (max-width: 700px){ .article-grid .article-card{ flex-basis: calc(50% - 10px); margin-inline-end: 20px; } .article-grid .article-card:nth-child(3n){ margin-inline-end: 20px; } .article-grid .article-card:nth-child(2n){ margin-inline-end: 0; } } .article-card{ border: 1px solid var(--gray-border); border-radius: var(--radius); overflow: hidden; background: var(--white); } .article-card .art-thumb{ aspect-ratio: 16/10; background: var(--gray-light); overflow: hidden; } .article-card .art-thumb img{ width: 100%; height: 100%; object-fit: cover; } .article-card .art-body{ padding: 12px 14px 16px; } .article-card .art-date{ font-size: 11px; color: var(--gray-text); margin-bottom: 4px; } .article-card h3{ font-size: 14.5px; margin-bottom: 6px; } .article-card h3 a{ color: var(--black); } .article-card p{ font-size: 12.5px; color: var(--gray-text); margin: 0; } /* ===================== Single article ===================== */ .article-single-wrap{ padding: 26px 0 50px; max-width: 760px; } .article-single-head{ margin-bottom: 18px; } .article-single-head .art-date{ font-size: 12.5px; color: var(--gray-text); margin-bottom: 8px; } .article-single-head h1{ font-size: clamp(22px,4vw,30px); line-height: 1.5; } .article-single-thumb{ aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--gray-light); margin-bottom: 24px; } .article-single-thumb img{ width: 100%; height: 100%; object-fit: cover; } .article-single-body{ font-size: 15.5px; line-height: 2; color: #2a2a2a; } .article-single-body h2{ font-size: 20px; margin: 34px 0 14px; padding-inline-start: 12px; border-inline-start: 4px solid var(--yellow); } .article-single-body h3{ font-size: 17px; margin: 26px 0 10px; } .article-single-body p{ margin: 0 0 16px; } .article-single-body ul, .article-single-body ol{ margin: 0 0 16px; padding-inline-start: 22px; } .article-single-body li{ margin-bottom: 8px; } .article-single-body strong{ color: var(--black); } .article-single-body a{ color: var(--yellow-dark); text-decoration: underline; } .article-related{ margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--gray-border); } .article-related h2{ font-size: 19px; margin-bottom: 18px; } .article-comments{ margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--gray-border); } .article-comments .comment-form input, .article-comments .comment-form textarea{ width: 100%; border: 1.5px solid var(--gray-border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; } .article-comments .comment-form p{ margin-bottom: 14px; } .article-comments .comment-form .form-submit input{ width: auto; background: var(--yellow); color: var(--black); font-weight: 700; border: none; cursor: pointer; padding: 10px 26px; } /* ===================== Category archive ===================== */ .archive-head{ padding: 26px 0 6px; } .archive-head h1{ font-size: 24px; } .archive-head .archive-count{ color: var(--gray-text); font-size: 13px; } .archive-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 20px; flex-wrap: wrap; } .woocommerce-ordering select{ border: 1.5px solid var(--gray-border); border-radius: 999px; padding: 8px 14px; background: var(--white); } .load-more-wrap{ margin-top: 32px; display: flex; justify-content: center; } .load-more-wrap .btn{ padding: 12px 34px; border-radius: 999px; font-weight: 700; font-size: 14px; } .load-more-wrap .btn:disabled{ opacity: .6; cursor: default; } .woocommerce-pagination, .pagination{ margin-top: 32px; display: flex; justify-content: center; } .woocommerce-pagination ul{ display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; border: none !important; } .woocommerce-pagination ul li{ border: none !important; float: none; } .pagination .nav-links{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .woocommerce-pagination a, .woocommerce-pagination span, .pagination .page-numbers{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; background: var(--gray-light); box-sizing: border-box; font-size: 13.5px; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; transition: background .15s ease, box-shadow .15s ease, color .15s ease; } .woocommerce-pagination a:hover, .pagination .page-numbers:not(.current):not(.dots):hover{ background: var(--gray-border); } .woocommerce-pagination .current, .pagination .page-numbers.current{ background: var(--yellow) !important; color: var(--black) !important; box-shadow: 0 6px 14px rgba(230, 191, 0, .55) !important; } .pagination .page-numbers.dots{ background: transparent; font-weight: 700; color: var(--gray-text); } .pagination .page-numbers.prev, .pagination .page-numbers.next, .woocommerce-pagination a.next, .woocommerce-pagination a.prev{ background: transparent; color: var(--gray-text); font-weight: 400; font-size: 16px; } /* ===================== Footer ===================== */ .site-footer{ background: var(--black); color: #cfcfcf; margin-top: 50px; padding: 44px 0 22px; } .footer-grid{ display: flex; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid #2a2a2a; } .footer-col{ flex: 0 0 calc(25% - 18px); min-width: 0; margin-inline-end: 24px; margin-bottom: 24px; } .footer-col:nth-child(4n){ margin-inline-end: 0; } .footer-col-brand{ flex-basis: calc(25% - 18px); } @media (max-width: 900px){ .footer-col{ flex-basis: calc(50% - 12px); margin-inline-end: 24px; } .footer-col:nth-child(4n){ margin-inline-end: 24px; } .footer-col:nth-child(2n){ margin-inline-end: 0; } } @media (max-width: 480px){ .site-footer{ padding: 30px 0 16px; } .footer-grid{ padding-bottom: 18px; } .footer-col{ flex-basis: 100%; margin-inline-end: 0 !important; margin-bottom: 14px; } .footer-col-brand{ margin-bottom: 18px; } .footer-desc{ margin: 8px 0 12px; max-width: none; } .enamad-badge img{ width: 56px; height: 56px; } } .footer-col h4{ color: var(--white); font-size: 13.5px; font-weight: 700; margin: 0 0 14px; } .footer-col ul{ display: flex; flex-direction: column; gap: 9px; } .footer-col ul li{ font-size: 13px; line-height: 1.6; } .footer-col a{ color: #cfcfcf; } .footer-col a:hover{ color: var(--yellow); } /* Collapsible sections: full lists on desktop, tap-to-expand on mobile (see main.js which closes these by default under 880px). */ .footer-accordion summary{ color: var(--white); font-size: 13.5px; font-weight: 700; margin: 0 0 14px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .footer-accordion summary::-webkit-details-marker{ display: none; } .footer-accordion summary::after{ content: ''; width: 9px; height: 9px; flex: none; border-inline-end: 1.5px solid #888; border-block-end: 1.5px solid #888; transform: rotate(45deg); margin-top: -4px; transition: transform .2s ease; } .footer-accordion[open] summary::after{ transform: rotate(225deg); margin-top: 3px; } .footer-accordion summary::marker{ content: ''; } @media (max-width: 880px){ .footer-accordion summary{ padding: 4px 0; } .footer-accordion ul{ padding-top: 4px; } } .footer-desc{ font-size: 12.5px; line-height: 1.9; color: #a6a6a6; margin: 12px 0 16px; max-width: 32ch; } .enamad-badge{ display: inline-block; border-radius: 8px; overflow: hidden; line-height: 0; } .enamad-badge img{ display: block; border-radius: 8px; } .footer-contact li{ display: flex; align-items: center; gap: 9px; } .footer-contact svg{ width: 16px; height: 16px; flex: none; color: var(--yellow); } .footer-contact .footer-hours{ color: #a6a6a6; } .footer-contact .footer-hours svg{ color: #a6a6a6; } .footer-bottom{ padding-top: 18px; font-size: 12px; color: #888; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .footer-sitemap{ display: flex; gap: 16px; flex-wrap: wrap; } .footer-sitemap a{ color: #a6a6a6; } .footer-sitemap a:hover{ color: var(--yellow); } @media (max-width: 560px){ .footer-bottom{ flex-direction: column; text-align: center; } } .footer-credit{ margin-top: 14px; padding-top: 14px; border-top: 1px solid #221f16; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: #6b6b6b; } .footer-credit a{ color: var(--yellow); font-weight: 700; } .footer-credit a:hover{ color: var(--yellow-dark); text-decoration: underline; } @keyframes footer-credit-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } } .footer-credit-blink{ animation: footer-credit-blink 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .footer-credit-blink{ animation: none; } } /* ===================== Empty state ===================== */ .empty-state{ text-align: center; padding: 60px 20px; color: var(--gray-text); } /* ===================== WhatsApp floating button ===================== */ .whatsapp-float{ position: fixed; z-index: 800; bottom: 22px; inset-inline-end: 22px; display: flex; align-items: center; gap: 9px; background: #25D366; color: #fff; padding: 13px 16px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.22); font-weight: 700; font-size: 13.5px; transition: transform .15s ease; } .whatsapp-float:hover{ transform: translateY(-2px); } .whatsapp-float svg{ width: 24px; height: 24px; flex: none; } .whatsapp-float .wa-label{ white-space: nowrap; } /* ===================== Mobile app-style bottom tab bar ===================== */ .mobile-tabbar{ display: none; } @media (max-width: 880px){ body{ padding-bottom: 66px; } .whatsapp-float{ bottom: 78px; } .whatsapp-float .wa-label{ display: none; } .whatsapp-float{ padding: 13px; } .mobile-tabbar{ display: flex; position: fixed; z-index: 700; inset-inline: 0; bottom: 0; background: var(--white); border-top: 1px solid var(--gray-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.06); } .mobile-tabbar a, .mobile-tabbar button{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; padding: 6px 2px; color: var(--gray-text); font-size: 10.5px; font-weight: 600; font-family: inherit; } .mobile-tabbar svg{ width: 21px; height: 21px; } .mobile-tabbar a.active, .mobile-tabbar a:hover, .mobile-tabbar button:hover{ color: var(--black); } .mobile-tabbar a.active svg{ color: var(--yellow-dark); } .mobile-tabbar .cart-count{ position: static; display: inline-flex; background: var(--yellow); color: var(--black); border: none; margin-inline-start: 2px; min-width: 15px; height: 15px; font-size: 9.5px; } } /* ===================== Responsive ===================== */ @media (max-width: 880px){ .header-search{ display: none; } .mobile-search{ display: block; position: relative; } .header-top{ padding: 12px 0; } } @media (max-width: 480px){ .cat-grid .cat-card{ flex-basis: calc(33.3333% - 6.7px); margin-inline-end: 10px; margin-bottom: 10px; } .cat-grid .cat-card:nth-child(4n){ margin-inline-end: 10px; } .cat-grid .cat-card:nth-child(3n){ margin-inline-end: 0; } .product-card{ flex-basis: calc(50% - 6px); margin-inline-end: 12px; margin-bottom: 12px; } .product-card:nth-child(3n){ margin-inline-end: 12px; } .product-card:nth-child(2n){ margin-inline-end: 0; } .hero{ padding: 24px 18px; } .section{ padding: 28px 0; } } /* ====================================================================== * WooCommerce default markup reskin (shop/category archive, single * product, cart, checkout, my-account). These templates are intentionally * NOT overridden structurally -- only restyled -- to avoid breaking * add-to-cart, variations, coupons or checkout/payment logic. * ====================================================================== */ /* ---- Breadcrumb ---- */ .woocommerce-breadcrumb{ padding: 16px 0 0; font-size: 12.5px; color: var(--gray-text); } .woocommerce-breadcrumb a{ color: var(--gray-text); } .woocommerce-breadcrumb a:hover{ color: var(--black); } /* ---- Shop / category archive header ---- */ .woocommerce-products-header{ padding: 16px 0 2px; } h1.page-title{ font-size: 22px !important; margin: 12px 0 2px !important; line-height: 1.3; } .term-description, .woocommerce-products-header__description{ color: var(--gray-text); font-size: 13.5px; margin: 4px 0 0; max-width: 70ch; } .woocommerce-result-count, .woocommerce-ordering{ display: inline-flex; align-items: center; margin: 0 0 10px !important; color: var(--gray-text); font-size: 13px; } .woocommerce > .container > .woocommerce-result-count, p.woocommerce-result-count{ float: none; } .woocommerce-result-count{ margin-inline-end: auto !important; } /* ---- Product loop grid (archive / related / upsells) ---- */ /* Flexbox, not CSS Grid, and no `gap` -- see note above .cat-grid. */ ul.products{ display: flex !important; flex-wrap: wrap !important; list-style: none; margin: 4px 0 0 !important; padding: 0 !important; } ul.products li.product, ul.products .product-card{ width: auto !important; padding: 0 !important; float: none !important; flex: 0 0 calc(25% - 15px) !important; min-width: 0 !important; margin: 0 !important; margin-inline-end: 20px !important; margin-block-end: 20px !important; } ul.products li.product:nth-child(4n), ul.products .product-card:nth-child(4n){ margin-inline-end: 0 !important; } @media (max-width: 900px){ ul.products li.product, ul.products .product-card{ flex-basis: calc(33.3333% - 13.4px) !important; margin-inline-end: 20px !important; } ul.products li.product:nth-child(4n), ul.products .product-card:nth-child(4n){ margin-inline-end: 20px !important; } ul.products li.product:nth-child(3n), ul.products .product-card:nth-child(3n){ margin-inline-end: 0 !important; } } .related.products, .up-sells.upsells.products{ margin-top: 46px; } .related.products > h2, .up-sells.upsells.products > h2{ font-size: 20px; margin-bottom: 16px; } @media (max-width: 480px){ ul.products li.product, ul.products .product-card{ flex-basis: calc(50% - 6px) !important; margin-inline-end: 12px !important; } ul.products li.product:nth-child(3n), ul.products .product-card:nth-child(3n){ margin-inline-end: 12px !important; } ul.products li.product:nth-child(2n), ul.products .product-card:nth-child(2n){ margin-inline-end: 0 !important; } ul.products li.product, ul.products .product-card{ flex-basis: calc(50% - 7px) !important; } } /* ---- Pagination (loop) already styled via .woocommerce-pagination in main section ---- */ /* ---- Single product page ---- */ .single-product div.product:not(.product-card){ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; padding: 26px 0 10px; } @media (max-width: 800px){ .single-product div.product:not(.product-card){ grid-template-columns: 1fr; gap: 24px; } } .single-product div.product .woocommerce-product-gallery{ position: relative; } .single-product div.product .woocommerce-product-gallery__wrapper{ border-radius: var(--radius); overflow: hidden; background: var(--gray-light); } .single-product div.product .woocommerce-product-gallery__image img{ width: 100%; height: auto; object-fit: contain; } .single-product div.product .flex-control-thumbs{ display: flex; gap: 8px; margin: 10px 0 0; list-style: none; padding: 0; } .single-product div.product .flex-control-thumbs li{ width: 62px; } .single-product div.product .flex-control-thumbs img{ border-radius: 8px; border: 1.5px solid var(--gray-border); cursor: pointer; opacity: .7; } .single-product div.product .flex-control-thumbs img.flex-active{ opacity: 1; border-color: var(--yellow); } .single-product div.product .summary{ padding-top: 4px; } .single-product div.product .product_title{ font-size: clamp(20px,3vw,26px); margin-bottom: 10px; } .single-product div.product .price{ font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 10px; display: block; } .single-product div.product .price ins{ text-decoration: none; } .single-product div.product .price del{ color: var(--gray-text); font-size: 15px; font-weight: 500; margin-inline-end: 8px; } .single-product div.product .woocommerce-product-rating{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .single-product div.product .stock{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; } .single-product div.product .stock.in-stock{ background: var(--good-bg,#e3f3e9); color: var(--success); } .single-product div.product .stock.out-of-stock{ background: var(--black); color: var(--white); } .single-product div.product p.stock::before{ content: '●'; font-size: 8px; } .single-product div.product form.cart{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .single-product div.product .quantity{ display: inline-flex; } .single-product div.product .quantity .qty{ width: 66px; text-align: center; border: 1.5px solid var(--gray-border); border-radius: 999px; padding: 12px 8px; font-weight: 700; } .single-product div.product button.single_add_to_cart_button{ background: var(--black) !important; color: var(--white) !important; border: none !important; border-radius: 999px !important; padding: 14px 30px !important; font-weight: 800; font-size: 14.5px !important; transition: background .15s ease; box-shadow: none !important; } .single-product div.product button.single_add_to_cart_button:hover{ background: var(--yellow) !important; color: var(--black) !important; } .single-product div.product button.single_add_to_cart_button.disabled{ background: var(--gray-light) !important; color: var(--gray-text) !important; } .single-product div.product .product_meta{ font-size: 12.5px; color: var(--gray-text); line-height: 2; border-top: 1px solid var(--gray-border); padding-top: 14px; } .single-product div.product .product_meta a{ color: var(--gray-text); text-decoration: underline; } .single-product div.product .product_meta a:hover{ color: var(--black); } /* Tabs (description / additional info / reviews) */ .woocommerce-tabs{ margin-top: 40px; grid-column: 1 / -1; } .woocommerce-tabs ul.tabs{ display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--gray-border); overflow-x: auto; } .woocommerce-tabs ul.tabs li{ margin: 0; } .woocommerce-tabs ul.tabs li a{ display: block; padding: 12px 16px; font-weight: 700; font-size: 13.5px; color: var(--gray-text); white-space: nowrap; } .woocommerce-tabs ul.tabs li.active a{ color: var(--black); border-bottom: 2px solid var(--yellow); } .woocommerce-tabs .woocommerce-Tabs-panel{ max-width: 76ch; font-size: 14px; line-height: 1.9; } .woocommerce-tabs table.shop_attributes{ width: 100%; border-collapse: collapse; max-width: 560px; } .woocommerce-tabs table.shop_attributes th, .woocommerce-tabs table.shop_attributes td{ padding: 10px 12px; border-bottom: 1px solid var(--gray-border); font-size: 13.5px; text-align: right; } .woocommerce-tabs table.shop_attributes th{ font-weight: 700; width: 38%; background: var(--gray-light); } /* Star rating */ .star-rating{ position: relative; width: 84px; height: 16px; font-size: 14px; line-height: 1; } .star-rating::before{ content: '☆☆☆☆☆'; color: var(--gray-border); letter-spacing: 3px; position: absolute; inset-inline-start: 0; } .star-rating span{ position: absolute; inset-inline-start: 0; top: 0; overflow: hidden; } .star-rating span::before{ content: '★★★★★'; color: var(--yellow-dark); letter-spacing: 3px; } /* ---- Notices ---- */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{ list-style: none; border-radius: var(--radius-sm); padding: 14px 18px; margin: 16px 0; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* WC's absolute-positioned status icon (::before) assumes core's own padding and overlaps our text with the flex layout above — our colored backgrounds already signal status, so drop the icon instead of re-deriving its offset. */ .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before, .woocommerce-noreviews::before{ content: none !important; display: none !important; } .woocommerce-message{ background: var(--good-bg,#e3f3e9); color: var(--success); } .woocommerce-error{ background: #fbe6e2; color: var(--danger); } .woocommerce-info{ background: var(--gray-light); color: var(--black); } .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button{ background: var(--black); color: var(--white); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; } /* ---- Cart page ---- */ .woocommerce-cart-form{ margin-top: 20px; } table.shop_table{ width: 100%; border-collapse: collapse; margin-bottom: 20px; } table.shop_table th{ text-align: right; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-text); padding: 12px; border-bottom: 1px solid var(--gray-border); } table.shop_table td{ padding: 14px 12px; border-bottom: 1px solid var(--gray-border); vertical-align: middle; } table.shop_table td.product-thumbnail img{ width: 64px; border-radius: 8px; } table.shop_table td.product-name a{ font-weight: 600; } table.shop_table .quantity .qty{ width: 60px; border: 1.5px solid var(--gray-border); border-radius: 999px; padding: 8px; text-align: center; } table.shop_table td.product-remove a{ display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--danger); font-weight: 800; } table.shop_table td.product-remove a:hover{ background: #fbe6e2; } .coupon{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .coupon .input-text{ border: 1.5px solid var(--gray-border); border-radius: 999px; padding: 10px 16px; min-width: 160px; } .cart-collaterals{ margin-top: 26px; } .cart_totals{ background: var(--gray-light); border-radius: var(--radius); padding: 20px 22px; max-width: 420px; margin-inline-end: auto; } .cart_totals h2{ font-size: 16px; } .cart_totals table{ width: 100%; border-collapse: collapse; } .cart_totals table th, .cart_totals table td{ padding: 10px 0; border-bottom: 1px solid var(--gray-border); font-size: 13.5px; } .cart_totals .order-total .amount{ font-size: 18px; font-weight: 800; } .wc-proceed-to-checkout .checkout-button, button.checkout-button{ display: block !important; width: 100%; text-align: center; background: var(--black) !important; color: var(--white) !important; border-radius: 999px !important; padding: 14px !important; font-weight: 800; margin-top: 8px; box-shadow: none !important; } .wc-proceed-to-checkout .checkout-button:hover{ background: var(--yellow) !important; color: var(--black) !important; } button[name="update_cart"], button[name="apply_coupon"]{ background: var(--white) !important; border: 1.5px solid var(--black) !important; color: var(--black) !important; border-radius: 999px !important; padding: 10px 20px !important; font-weight: 700; font-size: 13px !important; box-shadow: none !important; } button[name="update_cart"]:hover, button[name="apply_coupon"]:hover{ background: var(--black) !important; color: var(--white) !important; } /* ---- Checkout page ---- */ form.checkout{ margin-top: 20px; } form.checkout h3{ font-size: 17px; margin-top: 26px; } .woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row, .woocommerce-additional-fields .form-row{ margin-bottom: 14px; } .woocommerce-billing-fields label, .woocommerce-shipping-fields label, .woocommerce-additional-fields label{ display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--gray-text); } form.checkout .input-text, form.checkout select, form.checkout textarea{ width: 100%; border: 1.5px solid var(--gray-border); border-radius: var(--radius-sm); padding: 11px 14px; background: var(--white); } form.checkout .input-text:focus, form.checkout select:focus{ border-color: var(--black); } #order_review{ background: var(--gray-light); border-radius: var(--radius); padding: 20px 22px; margin-top: 20px; } /* Cart page "calculate shipping" box — never styled, so its at 1px and renders its own widget next to it) — Select2 sets its own inline width, so overriding the plain