/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 01 2026 | 06:46:30 */ /* ===================================================== CUSTOM GUITAR ATELIER — PREMIUM PAGINATION WooCommerce + Flatsome Custom CSS & JS settings: - Linking type: Internal - Where on page: In the element - Where in site: In Frontend only Keep this as a separate CSS snippet. It does not replace the existing header, footer, search, cart, or scrollbar CSS. ===================================================== */ body.woocommerce #main nav.woocommerce-pagination { --cga-page-walnut: #302119; --cga-page-deep: #16120f; --cga-page-gold: #c49a45; --cga-page-gold-light: #dfbd74; --cga-page-ivory: #fffdf8; display: flex; box-sizing: border-box; justify-content: center; width: 100%; margin: 26px 0 34px; padding: 0 15px; } /* The softly framed pagination group */ body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination { display: flex !important; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; margin: 0 !important; padding: 10px 12px !important; overflow: visible; list-style: none; background: linear-gradient( 135deg, rgba(255, 253, 248, 0.98), rgba(248, 240, 226, 0.94) ); border: 1px solid rgba(196, 154, 69, 0.34); border-radius: 999px; box-shadow: 0 10px 28px rgba(48, 33, 25, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95); } body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li { display: block; flex: 0 0 auto; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; } /* Page numbers and previous/next buttons */ body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; width: auto; min-width: 46px; height: 46px; margin: 0; padding: 0 12px; color: var(--cga-page-walnut) !important; background: var(--cga-page-ivory) !important; border: 2px solid rgba(196, 154, 69, 0.58) !important; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 4px 12px rgba(48, 33, 25, 0.09); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; text-decoration: none !important; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } /* Current page */ body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number.current, body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number[aria-current="page"] { color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-page-gold-light), var(--cga-page-gold) ) !important; border-color: #a97931 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 7px 18px rgba(48, 33, 25, 0.22); } /* Ellipsis */ body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number.dots { min-width: 28px; padding: 0 3px; color: var(--cga-page-gold) !important; background: transparent !important; border-color: transparent !important; box-shadow: none; } /* Previous and next arrows */ body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number.prev, body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number.next { padding: 0; } body.woocommerce #main nav.woocommerce-pagination .page-number.prev i, body.woocommerce #main nav.woocommerce-pagination .page-number.next i { color: inherit; font-size: 18px; line-height: 1; } /* Keyboard accessibility */ body.woocommerce #main nav.woocommerce-pagination a.page-number:focus-visible { outline: 3px solid var(--cga-page-gold-light); outline-offset: 3px; } /* Hover effects only on devices that truly support hover */ @media (hover: hover) and (pointer: fine) { body.woocommerce #main nav.woocommerce-pagination a.page-number:hover { color: var(--cga-page-gold-light) !important; background: linear-gradient( 135deg, var(--cga-page-walnut), var(--cga-page-deep) ) !important; border-color: var(--cga-page-gold) !important; box-shadow: 0 9px 20px rgba(22, 18, 15, 0.24); transform: translateY(-2px); } } /* Tablet and mobile */ @media (max-width: 849px) { body.woocommerce #main nav.woocommerce-pagination { margin: 22px 0 28px; padding: 0 12px; } body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination { gap: 6px; padding: 10px !important; border-radius: 26px; } body.woocommerce #main nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number { min-width: 44px; height: 44px; padding: 0 10px; font-size: 13.5px; } } /* Accessibility: respect reduced-motion settings */ @media (prefers-reduced-motion: reduce) { body.woocommerce #main nav.woocommerce-pagination .page-number { transition: none !important; } }