/* Theme Name: G.K. Almirah Description: Premium minimalist steel almirah e-commerce theme based on Aurum mockup Template: astra Author: G.K. Group Version: 2.0.0 */ /* NOTE: The @import for Cormorant Garamond / Montserrat / Cinzel that was here has been removed — the theme actually uses Poppins + Inter (loaded elsewhere), so it was render-blocking dead weight (~300ms wasted). If you ever need those fonts back, load them via in header.php instead of @import, which blocks first paint. */ :root { --color-bg-light: #F8F7F4; --color-bg-card: #EFEBE4; --color-text-dark: #222222; --color-text-muted: #555555; --color-text-light: #888888; --color-accent-gold: #B69A64; --color-accent: #B69A64; --gk-accent: #B69A64; --color-border: #D1CFC9; /* Fixed "ink" color for solid dark buttons/badges/banners that must stay dark and high-contrast in BOTH light and dark mode (unlike --color-text-dark, which intentionally flips to a light color in dark mode since it's used for body text). Never redefined in the dark-mode block below — that's the point. */ --color-ink: #1B1B1B; --font-serif: 'Poppins', sans-serif; --font-serif-logo: 'Poppins', sans-serif; --font-sans: 'Inter', sans-serif; --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } /* ========================================== DARK MODE Toggled via [data-theme="dark"] on , set/persisted by the header toggle button (see functions.php / header.php). Re-maps both our own theme variables AND Astra's global color variables, since Astra writes some inline styles (h1-h6, buttons, links) directly against --ast-global-color-N rather than our vars. ========================================== */ html[data-theme="dark"] { --color-bg-light: #171613; --color-bg-card: #232019; --color-text-dark: #F1EEE7; --color-text-muted: #C9C4B8; --color-text-light: #9A9488; --color-accent-gold: #CBAE78; --color-accent: #CBAE78; --gk-accent: #CBAE78; --color-border: #3A362D; --ast-global-color-2: #F1EEE7; --ast-global-color-3: #C9C4B8; --ast-global-color-4: #171613; --ast-global-color-5: #232019; --ast-global-color-6: #F1EEE7; --ast-global-color-7: #3A362D; --ast-global-color-8: #F1EEE7; } html[data-theme="dark"] body { background-color: var(--color-bg-light); color: var(--color-text-dark); } html[data-theme="dark"] .site-header, html[data-theme="dark"] header.gk-header, html[data-theme="dark"] footer.gk-footer, html[data-theme="dark"] .gk-footer { background-color: var(--color-bg-light); border-color: var(--color-border); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--color-bg-card); color: var(--color-text-dark); border-color: var(--color-border); } html { transition: background-color 0.25s ease; } html[data-theme="dark"] img.gk-invert-in-dark { filter: invert(1); } /* WooCommerce's built-in "no image" placeholder is a flat white square baked into the image file itself, so no background-color override touches it — invert it in dark mode so it reads as a dark tile with a light icon instead of a glaring white square. */ html[data-theme="dark"] img.woocommerce-placeholder { filter: invert(0.92) brightness(0.9); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: hidden; } body { font-family: var(--font-sans); color: var(--color-text-dark); background-color: var(--color-bg-light); line-height: 1.7; font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; transition: 0.3s ease; } img { max-width: 100%; display: block; } /* Typography */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; } .text-center { text-align: center; } .section-title { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 2px; margin: 0.75rem 0; color: var(--color-text-dark); } /* Header */ .gk-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 4rem; background: var(--color-bg-light); border-bottom: 1px solid rgba(0,0,0,0.05); } .gk-logo { font-family: var(--font-serif-logo); font-size: 1.8rem; color: var(--color-accent-gold); font-weight: 500; letter-spacing: 1px; } .gk-nav ul { display: flex; gap: 2.5rem; list-style: none; } .gk-nav a { font-size: 0.75rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-dark); } .gk-nav a:hover { color: var(--color-accent-gold); } .gk-header-icons { display: flex; gap: 1.5rem; } .gk-header-icons svg { width: 22px; height: 22px; color: var(--color-text-dark); stroke: currentColor; cursor: pointer; } /* Hero Section — styles moved to HOMEPAGE HERO ENHANCEMENTS section */ /* Product Grid */ .gk-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .gk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 5rem; } .gk-card-new { display: flex; flex-direction: column; } .gk-card-img-wrap { background: var(--color-bg-card); padding: 2rem; margin-bottom: 1.5rem; aspect-ratio: 1 / 1.1; display: flex; align-items: center; justify-content: center; } .gk-card-img-wrap img { mix-blend-mode: multiply; max-height: 100%; object-fit: contain; } .gk-card-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.25rem; } .gk-card-desc { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .gk-card-price { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; } .gk-btn-pill { display: block; text-align: center; width: 100%; padding: 0.8rem; border: 1px solid var(--color-text-dark); border-radius: 50px; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; background: transparent; color: var(--color-text-dark); transition: 0.3s; } .gk-btn-pill:hover { background: var(--color-ink); color: #fff; } /* Footer Restored CSS */ .gk-footer { background: #141414 !important; color: rgba(255, 255, 255, 0.85) !important; padding: 4rem 2rem 2rem; margin-top: 5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .gk-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .gk-footer-col h4 { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #ffffff !important; margin-bottom: 1.5rem !important; } .gk-footer-col ul { list-style: none; } .gk-footer-col ul li { margin-bottom: 0.8rem; } .gk-footer-col ul li a { color: rgba(255, 255, 255, 0.85) !important; font-size: 0.9rem; text-decoration: none; } .gk-footer-col ul li a:hover { color: #C8A96E !important; } .gk-footer-trust-badges { display: flex; gap: 1rem; justify-content: center; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .gk-trust-badge { height: 40px; border-radius: 4px; } .gk-footer-bottom { text-align: center; padding-top: 2rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75) !important; } .gk-footer-contact { margin-top: 2rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85) !important; } .gk-footer-contact p { margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.85) !important; } .gk-mobile-nav { display: none; } /* Hide mobile nav on desktop for now */ /* Fixes */ .gk-card-img-wrap img { max-width: 100%; } /* Floating Cart Override */ div[class*='cart-trigger'], button[class*='cart-trigger'], a[class*='cart-trigger'], .modern-cart-trigger, .wac-btn-floating, .woofc-trigger, .ast-floating-cart-wrap .ast-cart-menu-wrap, #surecart-trigger { background-color: var(--color-accent-gold) !important; border-color: var(--color-accent-gold) !important; } div[class*='cart-count'], span[class*='cart-count'], .mc-count, .xoo-wsc-sc-count, .woofc-count { background-color: var(--color-ink) !important; color: #fff !important; } /* WhatsApp Float */ .gk-whatsapp-float { position: fixed; bottom: 50px; left: 28px; background-color: #25d366; color: #fff; width: 54px; height: 54px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 9999; opacity: 1; visibility: visible; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Move WhatsApp icon higher on single product page in desktop mode so it never overlaps sticky purchase bar */ body.single-product .gk-whatsapp-float, .single-product .gk-whatsapp-float { bottom: 95px !important; left: 28px !important; } .gk-whatsapp-float svg { width: 30px; height: 30px; } .gk-whatsapp-float.is-visible { opacity: 1; visibility: visible; } .gk-whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5); } /* ============================================================ WooCommerce Shop Page Professional UI ============================================================ */ /* Container and Grid Layout */ .gk-shop-page { background-color: var(--color-bg-light); padding-bottom: 5rem; } .gk-shop-hero { background: linear-gradient(135deg, #1f1f1f, #2c2c2c); color: #fff; padding: 6rem 2rem; text-align: center; margin-bottom: 4rem; } .gk-shop-hero .page-title { font-size: 3.5rem; font-family: var(--font-serif); margin-bottom: 1rem; color: var(--color-accent-gold); text-transform: uppercase; letter-spacing: 3px; } .gk-product-breadcrumbs, .woocommerce-breadcrumb { font-size: 0.85rem; color: var(--color-text-muted, #777777); font-family: var(--font-sans); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .gk-product-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--color-text-dark, #1B1B1B); text-decoration: none; transition: color 0.2s ease; } .gk-product-breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--color-accent-gold, #B69A64); } html[data-theme="dark"] .gk-product-breadcrumbs, html[data-theme="dark"] .woocommerce-breadcrumb { color: #A09D96 !important; } html[data-theme="dark"] .gk-product-breadcrumbs a, html[data-theme="dark"] .woocommerce-breadcrumb a { color: #F1EEE7 !important; } html[data-theme="dark"] .gk-product-breadcrumbs a:hover, html[data-theme="dark"] .woocommerce-breadcrumb a:hover { color: var(--color-accent-gold, #CBAE78) !important; } .gk-shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; } /* Sidebar / Filters */ .gk-shop-filters { background-color: var(--color-bg-card); padding: 2rem; border: 1px solid var(--color-border); position: sticky; top: 2rem; } .gk-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .gk-filter-header h3 { font-size: 1.2rem; margin: 0; color: var(--color-text-dark); } .gk-filter-clear { background: none; border: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); cursor: pointer; } .gk-filter-clear:hover { color: var(--color-accent-gold); } .widget { margin-bottom: 2rem; } .widget-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget ul li { padding: 0.5rem 0; font-size: 0.95rem; color: var(--color-text-muted); border-bottom: 1px dashed #eaeaea; } .widget ul li:last-child { border-bottom: none; } .widget ul li a { color: var(--color-text-dark); } .widget ul li a:hover { color: var(--color-accent-gold); } /* Toolbar */ .gk-shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .woocommerce-result-count { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } .woocommerce-ordering select { padding: 0.5rem 1rem; border: 1px solid var(--color-border); background: var(--color-bg-card); font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-text-dark); outline: none; cursor: pointer; } .woocommerce-ordering select:focus { border-color: var(--color-accent-gold); } /* Products Grid */ body.woocommerce ul.products, body.woocommerce-page ul.products, ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2.5rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce ul.products::before, body.woocommerce ul.products::after, ul.products::before, ul.products::after { display: none !important; } /* Product Card (Modern 2-Column Responsive) */ body.woocommerce ul.products li.product.gk-product-card, ul.products li.gk-product-card, .gk-product-card { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; position: relative; display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; margin: 0 !important; width: 100% !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); } .gk-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-color: rgba(22, 100, 217, 0.25); } .gk-product-card-link { display: flex; flex-direction: column; flex-grow: 1; text-decoration: none !important; color: inherit; } .gk-product-card-image { position: relative; padding: 1rem; background: #f8f9fa; border-bottom: 1px solid rgba(0, 0, 0, 0.05); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gk-product-card-image img { max-height: 100%; width: auto; object-fit: contain; transition: transform 0.4s ease; } .gk-product-card:hover .gk-product-card-image img { transform: scale(1.04); } .gk-badge { position: absolute; top: 8px; left: 8px; right: auto; z-index: 5; padding: 0.25rem 0.6rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-radius: 4px; } .gk-badge-sale { background-color: #D32F2F; color: #fff; } .gk-badge-bestseller { background-color: #1664D9; color: #fff; } .gk-product-card-body { padding: 0.75rem 0.75rem 0.4rem; flex-grow: 1; display: flex; flex-direction: column; text-align: left; } .gk-product-card-title { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: #111827; text-transform: uppercase; margin: 0 0 0.35rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .gk-product-card-meta { font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 5px; margin: 0 0 0.4rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gk-product-card-meta svg { color: #94a3b8; flex-shrink: 0; } .gk-product-card-price { font-size: 1.05rem; font-weight: 700; color: #1664D9; margin: 0 0 0.35rem 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .gk-product-card-price del, .gk-product-card-price del .woocommerce-Price-amount, .gk-product-card-price del .woocommerce-Price-amount * { color: #94a3b8 !important; font-size: 0.82em !important; font-weight: 400 !important; text-decoration: line-through !important; } .gk-product-card-price ins { text-decoration: none !important; color: #1664D9 !important; font-weight: 700 !important; } .gk-product-card-price ins .woocommerce-Price-amount, .gk-product-card-price > .woocommerce-Price-amount, .gk-product-card-price .price > .woocommerce-Price-amount, .gk-product-card-price bdi { color: #1664D9; font-weight: 700; } .gk-product-colors-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 0.4rem; margin-bottom: 0.6rem; width: 100%; } .gk-colors-count { color: #475569; font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 6px; line-height: 1.2; } html[data-theme="dark"] .gk-colors-count { color: #cbd5e1; } .gk-colors-indicator-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); background: conic-gradient(#f44336 0deg 60deg, #ff9800 60deg 120deg, #ffeb3b 120deg 180deg, #4caf50 180deg 240deg, #2196f3 240deg 300deg, #9c27b0 300deg 360deg); flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .gk-active-color-name { color: var(--color-accent-gold, #B69A64); font-weight: 700; margin-left: 2px; } .gk-swatch-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; align-items: center; justify-content: flex-start; margin: 0; padding: 2px 1px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .gk-swatch-list::-webkit-scrollbar { display: none; } button.gk-mini-swatch, .gk-mini-swatch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff inset, 0 1px 3px rgba(0,0,0,0.15); padding: 0; cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease; border: 1.5px solid #d1d5db; outline: none; line-height: 1; vertical-align: middle; position: relative; background-clip: padding-box; } button.gk-mini-swatch:hover, .gk-mini-swatch:hover { transform: scale(1.18); box-shadow: 0 0 0 1.5px #fff inset, 0 2px 6px rgba(0,0,0,0.25); z-index: 2; } button.gk-mini-swatch.is-active, .gk-mini-swatch.is-active { transform: scale(1.15); border: 2px solid var(--color-accent-gold, #B69A64) !important; box-shadow: 0 0 0 2px #fff inset, 0 0 8px rgba(182, 154, 100, 0.5) !important; z-index: 3; } html[data-theme="dark"] button.gk-mini-swatch, html[data-theme="dark"] .gk-mini-swatch { box-shadow: 0 0 0 1.5px #1e1e1e inset, 0 1px 3px rgba(0,0,0,0.4); border-color: #4b5563; } html[data-theme="dark"] button.gk-mini-swatch.is-active, html[data-theme="dark"] .gk-mini-swatch.is-active { border-color: var(--color-accent-gold, #CBAE78) !important; box-shadow: 0 0 0 2px #1e1e1e inset, 0 0 8px rgba(203, 174, 120, 0.55) !important; } .gk-product-card-actions { padding: 0 0.6rem 0.6rem; margin-top: auto; } .gk-btn-cart, .woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button.product_type_variable, .woocommerce ul.products li.product .button.product_type_simple, a.gk-btn-cart { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 0.55rem 0.6rem !important; background: var(--color-accent-gold, #B69A64) !important; background-color: var(--color-accent-gold, #B69A64) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid var(--color-accent-gold, #B69A64) !important; border-radius: 6px !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-size: 0.82rem !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 2px 6px rgba(182, 154, 100, 0.25) !important; cursor: pointer; } .gk-btn-cart:hover, .woocommerce ul.products li.product .button.add_to_cart_button:hover, .woocommerce ul.products li.product .button.product_type_variable:hover, .woocommerce ul.products li.product .button.product_type_simple:hover, a.gk-btn-cart:hover { background: #9d804b !important; background-color: #9d804b !important; border-color: #9d804b !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(182, 154, 100, 0.35) !important; } /* Wishlist heart button on product cards */ .gk-wishlist-btn { position: absolute; top: 8px; right: 8px; left: auto; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1B1B1B; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease; padding: 0; } .gk-wishlist-btn svg { width: 18px; height: 18px; } .gk-wishlist-btn:hover { transform: scale(1.08); color: #D32F2F; } .gk-wishlist-btn.active { color: #D32F2F; } .gk-wishlist-btn.active svg { fill: #D32F2F; } /* Gallery Main floating wishlist icon */ .gk-product-gallery-main { position: relative !important; } .gk-product-gallery-main .gk-wishlist-btn { position: absolute !important; top: 1rem !important; right: 1rem !important; left: auto !important; bottom: auto !important; z-index: 10 !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1B1B1B !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important; transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease !important; padding: 0 !important; margin: 0 !important; } .gk-product-gallery-main .gk-wishlist-btn:hover { transform: scale(1.08) !important; color: #D32F2F !important; background: #FFFFFF !important; } .gk-product-gallery-main .gk-wishlist-btn.active { color: #D32F2F !important; } .gk-product-gallery-main .gk-wishlist-btn.active svg { fill: #D32F2F !important; } html[data-theme="dark"] .gk-product-gallery-main .gk-wishlist-btn { background: rgba(35, 32, 26, 0.94) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #E6E2D8 !important; } /* Single product page labeled button under Add to Cart / Buy Now */ .gk-single-product .gk-wishlist-btn-single, .gk-product-add-to-cart .gk-wishlist-btn-single, button.gk-wishlist-btn-single { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 44px !important; height: 44px !important; border-radius: 8px !important; background: transparent !important; border: 1.5px solid var(--color-border, #E2DDD5) !important; color: var(--color-text-dark, #1B1B1B) !important; padding: 0 1.25rem !important; margin: 0.85rem 0 0 0 !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.85rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: none !important; cursor: pointer !important; transition: all 0.25s ease !important; white-space: nowrap !important; } .gk-single-product .gk-wishlist-btn-single svg, .gk-product-add-to-cart .gk-wishlist-btn-single svg, button.gk-wishlist-btn-single svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; transition: fill 0.2s ease, stroke 0.2s ease !important; } .gk-single-product .gk-wishlist-btn-single:hover, .gk-product-add-to-cart .gk-wishlist-btn-single:hover, button.gk-wishlist-btn-single:hover { transform: translateY(-1px) !important; background: rgba(211, 47, 47, 0.05) !important; color: #D32F2F !important; border-color: #D32F2F !important; } .gk-single-product .gk-wishlist-btn-single.active, .gk-product-add-to-cart .gk-wishlist-btn-single.active, button.gk-wishlist-btn-single.active { background: #D32F2F !important; color: #FFFFFF !important; border-color: #D32F2F !important; } .gk-single-product .gk-wishlist-btn-single.active svg, .gk-product-add-to-cart .gk-wishlist-btn-single.active svg, button.gk-wishlist-btn-single.active svg { fill: #FFFFFF !important; stroke: #FFFFFF !important; } html[data-theme="dark"] .gk-single-product .gk-wishlist-btn-single, html[data-theme="dark"] .gk-product-add-to-cart .gk-wishlist-btn-single, html[data-theme="dark"] button.gk-wishlist-btn-single { border-color: rgba(255, 255, 255, 0.18) !important; color: #E6E2D8 !important; background: transparent !important; } html[data-theme="dark"] .gk-single-product .gk-wishlist-btn-single:hover, html[data-theme="dark"] .gk-product-add-to-cart .gk-wishlist-btn-single:hover, html[data-theme="dark"] button.gk-wishlist-btn-single:hover { border-color: #E57373 !important; color: #E57373 !important; background: rgba(229, 115, 115, 0.1) !important; } html[data-theme="dark"] .gk-single-product .gk-wishlist-btn-single.active, html[data-theme="dark"] .gk-product-add-to-cart .gk-wishlist-btn-single.active, html[data-theme="dark"] button.gk-wishlist-btn-single.active { background: #D32F2F !important; color: #FFFFFF !important; border-color: #D32F2F !important; } /* Wishlist Page */ .gk-wishlist-page { padding-bottom: 4rem; } .gk-wishlist-hero { /* Fixed dark background regardless of theme — --color-text-dark flips to near-white in dark mode, which would make the white title invisible. */ background: #1B1B1B; padding: 3.5rem 0; text-align: center; margin-bottom: 3rem; } .gk-wishlist-title { color: #fff !important; font-family: var(--font-serif); font-size: 2.25rem; margin-bottom: 0.5rem; } .gk-wishlist-subtitle { color: rgba(255, 255, 255, 0.75); font-size: 1rem; } .gk-wishlist-loading, .gk-wishlist-error { text-align: center; padding: 3rem 0; color: var(--color-text-muted); } .gk-wishlist-email-form { background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .gk-wishlist-email-form label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--color-text-dark); margin-bottom: 0.6rem; } .gk-wishlist-email-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .gk-wishlist-email-row input[type="email"] { flex: 1 1 260px; padding: 0.75rem 1rem; border: 1px solid var(--color-border); background: var(--color-bg-light); color: var(--color-text-dark); font-family: var(--font-sans); } .gk-wishlist-email-row .gk-btn { flex: 0 0 auto; } .gk-wishlist-email-status { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--color-accent-gold); min-height: 1.2em; } .gk-wishlist-email-status.is-error { color: #c0392b; } @media (max-width: 480px) { .gk-wishlist-email-row { flex-direction: column; } .gk-wishlist-email-row input[type="email"] { flex: 0 0 auto; width: 100%; height: auto; padding: 0.7rem 1rem; font-size: 1rem; } .gk-wishlist-email-row .gk-btn { width: 100%; } } .gk-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .gk-wishlist-card { position: relative; background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 1.25rem; text-align: center; display: flex; flex-direction: column; } .gk-wishlist-remove { position: absolute; top: 0.75rem; right: 0.75rem; width: 28px; height: 28px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); color: #1B1B1B; font-size: 1.2rem; cursor: pointer; z-index: 2; } .gk-wishlist-remove:hover { background: #D32F2F; color: #fff; border-color: #D32F2F; } .gk-wishlist-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex-grow: 1; } .gk-wishlist-card-link img { max-width: 100%; height: 160px; object-fit: contain; margin: 0 auto 1rem; } .gk-wishlist-card-link h3 { font-size: 1.05rem; color: var(--color-text-dark); margin-bottom: 0.4rem; } .gk-wishlist-price { color: var(--color-accent-gold); font-weight: 500; margin-bottom: 0.5rem; } .gk-wishlist-oos { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: #D32F2F; margin-bottom: 0.5rem; } .gk-wishlist-view-btn { margin-top: 0.75rem; text-align: center; font-size: 0.8rem; background: transparent !important; color: var(--color-text-dark) !important; border: 1px solid var(--color-text-dark) !important; } .gk-wishlist-view-btn:hover { background: var(--color-accent-gold) !important; border-color: var(--color-accent-gold) !important; color: #fff !important; } .gk-wishlist-empty { text-align: center; padding: 4rem 1rem; color: var(--color-text-muted); } .gk-wishlist-empty svg { width: 56px; height: 56px; color: var(--color-border); margin-bottom: 1rem; } .gk-wishlist-empty p { margin-bottom: 1.5rem; font-size: 1.05rem; } /* Explicit fixed colors — this button sits directly on the page background (not a forced-dark section), so it must not use the --color-text-dark variable, which flips light in dark mode and would wash the button out. */ .gk-wishlist-empty .gk-btn-primary { background: #1B1B1B !important; border-color: #1B1B1B !important; color: #fff !important; } .gk-wishlist-empty .gk-btn-primary:hover { background: var(--color-accent-gold) !important; border-color: var(--color-accent-gold) !important; color: #fff !important; } /* ========================================== PAGINATION (Luxury Theme Gold) ========================================== */ .woocommerce nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination, nav.woocommerce-pagination, .gk-shop-page .woocommerce-pagination, .gk-blog-pagination { margin-top: 3rem !important; border-top: 1px solid var(--color-border, #EAE6DF) !important; padding-top: 2rem !important; text-align: center !important; width: 100% !important; display: block !important; clear: both !important; } .woocommerce nav.woocommerce-pagination ul, .woocommerce-page nav.woocommerce-pagination ul, nav.woocommerce-pagination ul.page-numbers, .gk-blog-pagination ul, ul.page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; border: none !important; } .woocommerce nav.woocommerce-pagination ul li, .woocommerce-page nav.woocommerce-pagination ul li, nav.woocommerce-pagination ul.page-numbers li { display: inline-block !important; margin: 0 !important; padding: 0 !important; border: none !important; float: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce-page nav.woocommerce-pagination ul li a, .woocommerce-page nav.woocommerce-pagination ul li span, nav.woocommerce-pagination ul.page-numbers li a, nav.woocommerce-pagination ul.page-numbers li span, .ast-pagination .page-numbers, .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; border: 1.5px solid var(--color-border, #E5E0D8) !important; border-radius: 6px !important; background: #FAF8F5 !important; background-color: #FAF8F5 !important; color: var(--color-text-dark, #222222) !important; -webkit-text-fill-color: var(--color-text-dark, #222222) !important; font-family: var(--font-heading, 'Montserrat', sans-serif) !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; outline: none !important; } /* Active / Current Page Number -> Luxury Solid Gold */ .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a.current, .woocommerce-page nav.woocommerce-pagination ul li span.current, .woocommerce-page nav.woocommerce-pagination ul li a.current, nav.woocommerce-pagination ul.page-numbers li span.current, nav.woocommerce-pagination ul.page-numbers li a.current, .ast-pagination .page-numbers.current, .post-page-numbers.current .page-link, .page-numbers.current, span.page-numbers.current { background: var(--color-accent-gold, #C8A96E) !important; background-color: var(--color-accent-gold, #C8A96E) !important; border-color: var(--color-accent-gold, #C8A96E) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(200, 169, 110, 0.35) !important; cursor: default !important; transform: translateY(-1px) !important; } /* Hover state on non-current buttons */ .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce-page nav.woocommerce-pagination ul li a:hover, nav.woocommerce-pagination ul.page-numbers li a:hover, .ast-pagination .page-numbers:hover:not(.current), .page-numbers:hover:not(.current) { background: #FFFFFF !important; background-color: #FFFFFF !important; border-color: var(--color-accent-gold, #C8A96E) !important; color: var(--color-accent-gold, #C8A96E) !important; -webkit-text-fill-color: var(--color-accent-gold, #C8A96E) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; transform: translateY(-2px) !important; } /* Arrow Navigation */ .woocommerce nav.woocommerce-pagination ul li a.prev, .woocommerce nav.woocommerce-pagination ul li a.next, nav.woocommerce-pagination ul.page-numbers li a.prev, nav.woocommerce-pagination ul.page-numbers li a.next { font-size: 1.15rem !important; font-weight: 700 !important; } /* Responsive */ @media (max-width: 992px) { .gk-shop-layout { grid-template-columns: 1fr; } .gk-shop-filters { position: relative; top: 0; margin-bottom: 2rem; } } @media (max-width: 768px) { body.woocommerce ul.products, body.woocommerce-page ul.products, ul.products { grid-template-columns: repeat(2, 1fr) !important; } .gk-shop-hero .page-title { font-size: 2.5rem; } } /* Reset Astra/WooCommerce list item widths */ body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product, ul.products li.product { width: 100% !important; margin: 0 !important; clear: none !important; float: none !important; } @media (max-width: 576px) { body.woocommerce ul.products, body.woocommerce-page ul.products, ul.products { grid-template-columns: 1fr !important; } } /* Bulletproof Grid via ID */ #gk-products-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #gk-products-grid::before, #gk-products-grid::after, ul.products::before, ul.products::after { display: none !important; } #gk-products-grid li.product, ul.products li.product { width: 100% !important; margin: 0 !important; clear: none !important; float: none !important; } @media (max-width: 992px) { #gk-products-grid, ul.products, body.woocommerce ul.products, body.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } } @media (max-width: 768px) { #gk-products-grid, ul.products, body.woocommerce ul.products, body.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (max-width: 576px) { #gk-products-grid, ul.products, body.woocommerce ul.products, body.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } } /* Fix huge footer badges */ .gk-footer-trust-badges .gk-trust-badge { height: 60px !important; width: auto !important; max-width: 200px !important; object-fit: contain !important; filter: grayscale(100%) opacity(0.7) !important; transition: all 0.3s ease !important; margin: 0 10px !important; } .gk-footer-trust-badges .gk-trust-badge:hover { filter: grayscale(0%) opacity(1) !important; transform: scale(1.05) !important; } /* Activate Warranty Page */ .gk-warranty-section, .gk-distributor-section { padding: 6rem 0; background-color: var(--color-bg-light); } .gk-warranty-grid, .gk-distributor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .gk-warranty-info h2, .gk-distributor-info h2 { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-text-dark); margin-bottom: 1.5rem; } .gk-warranty-info p, .gk-distributor-info p { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 3rem; line-height: 1.8; } .gk-warranty-benefits, .gk-distributor-benefits { list-style: none; padding: 0; margin: 0; } .gk-warranty-benefits li, .gk-distributor-benefits li { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } .gk-warranty-benefits svg, .gk-distributor-benefits svg { color: var(--color-accent); flex-shrink: 0; width: 32px; height: 32px; margin-top: 0.2rem; } .gk-warranty-benefits span, .gk-distributor-benefits span { font-size: 1rem; color: var(--color-text-muted); line-height: 1.5; } .gk-warranty-benefits strong, .gk-distributor-benefits strong { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-text-dark); display: block; margin-bottom: 0.3rem; } .gk-warranty-form-wrapper, .gk-distributor-form-wrapper { background: var(--color-bg-card); padding: 3rem; border: 1px solid var(--color-border); box-shadow: 0 20px 40px rgba(0,0,0,0.04); } .gk-file-input { width: 100%; padding: 1rem; border: 1px dashed var(--color-border); background: var(--color-bg-light); color: var(--color-text-muted); cursor: pointer; font-family: var(--font-body); } .gk-file-input:focus { outline: none; border-color: var(--color-accent); } .gk-btn-full { width: 100%; text-align: center; justify-content: center; padding: 1.2rem; font-size: 1.1rem; margin-top: 1rem; } .gk-form-note { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin-top: 1.5rem; margin-bottom: 0; } @media (max-width: 992px) { .gk-warranty-grid, .gk-distributor-grid { grid-template-columns: 1fr; gap: 3rem; } .gk-warranty-form-wrapper, .gk-distributor-form-wrapper { padding: 2rem; } } /* Global Form Styles */ .gk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .gk-form-group { margin-bottom: 1.5rem; } .gk-form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; color: var(--color-text-dark); letter-spacing: 1px; } .gk-form-group input[type="text"], .gk-form-group input[type="email"], .gk-form-group input[type="tel"], .gk-form-group input[type="date"], .gk-form-group select, .gk-form-group textarea { width: 100%; padding: 0.75rem 0; border: none; border-bottom: 1px solid var(--color-border); background-color: transparent; border-radius: 0; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-dark); transition: all 0.4s ease; } .gk-form-group input:focus, .gk-form-group textarea:focus, .gk-form-group select:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: none; } @media (max-width: 768px) { .gk-warranty-form-wrapper, .gk-distributor-form-wrapper { padding: 1.5rem; box-shadow: none; border-left: none; border-right: none; } .gk-form-row { grid-template-columns: 1fr; gap: 0; } .gk-warranty-info h2, .gk-distributor-info h2 { font-size: 1.8rem; } .gk-warranty-benefits li, .gk-distributor-benefits li { gap: 1rem; margin-bottom: 1.5rem; } .gk-warranty-benefits svg, .gk-distributor-benefits svg { width: 24px; height: 24px; } } /* Specific Distributor form title */ .gk-distributor-form-wrapper .gk-form-title { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-text-dark); margin-bottom: 2rem; text-align: center; } /* ========================================== ROBOT VERIFICATION (I'M NOT A ROBOT CAPTCHA) ========================================== */ .gk-captcha-container { margin: 1.25rem 0 1.5rem; width: 100%; } .gk-captcha-box { display: flex; align-items: center; justify-content: space-between; background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 4px; padding: 0.75rem 1rem; max-width: 304px; box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.06); user-select: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } [data-theme="dark"] .gk-captcha-box { background: #201e18; border-color: #3e3a30; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } .gk-captcha-box.has-error { border-color: #d32f2f !important; animation: gkShake 0.4s ease; } @keyframes gkShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .gk-captcha-label { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; padding: 0; } .gk-captcha-checkbox { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } .gk-captcha-checkmark { position: relative; width: 28px; height: 28px; background-color: #ffffff; border: 2px solid #c1c1c1; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } [data-theme="dark"] .gk-captcha-checkmark { background-color: #171613; border-color: #555; } .gk-captcha-box:hover .gk-captcha-checkmark { border-color: #999; } .gk-captcha-box.is-verifying .gk-captcha-checkmark { border-color: var(--color-accent-gold, #B69A64); } .gk-captcha-box.is-verified .gk-captcha-checkmark { border-color: #2e7d32; background-color: #f1f8e9; } [data-theme="dark"] .gk-captcha-box.is-verified .gk-captcha-checkmark { background-color: #1b2e1b; border-color: #4caf50; } .gk-captcha-spinner { display: none; animation: gk-spin 0.8s linear infinite; } .gk-captcha-box.is-verifying .gk-captcha-spinner { display: block; } .gk-captcha-check-icon { display: none; } .gk-captcha-box.is-verified .gk-captcha-check-icon { display: block; animation: gkPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes gkPopIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .gk-captcha-text { font-size: 0.95rem; font-weight: 500; color: var(--color-text-dark, #222); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .gk-captcha-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #555; font-size: 0.65rem; line-height: 1.1; text-align: center; padding-left: 12px; border-left: 1px solid #e0e0e0; } [data-theme="dark"] .gk-captcha-logo { color: #999; border-left-color: #3e3a30; } .gk-captcha-logo svg { color: var(--color-accent-gold, #B69A64); margin-bottom: 2px; } .gk-captcha-logo span { font-weight: 700; letter-spacing: 0.5px; font-size: 0.62rem; color: #555; } [data-theme="dark"] .gk-captcha-logo span { color: #aaa; } .gk-captcha-logo small { font-size: 0.58rem; color: #888; } .gk-captcha-error { color: #d32f2f; font-size: 0.82rem; margin-top: 6px; font-weight: 500; display: none; } /* ========================================== SINGLE PRODUCT GALLERY & ZOOM ========================================== */ .gk-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } .gk-product-gallery { display: flex; flex-direction: column; gap: 1rem; } .gk-product-gallery-main { position: relative; overflow: hidden; background: #FDFBF7; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; cursor: crosshair; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; display: flex; align-items: center; justify-content: center; min-height: 380px; } .gk-product-gallery-main img.gk-main-image, .gk-product-gallery-main img { width: 100%; max-height: 520px; object-fit: contain; display: block; transform-origin: center center; transition: transform 0.2s ease-out; will-change: transform; } .gk-gallery-counter-badge { position: absolute; bottom: 14px; right: 14px; background: rgba(18, 18, 24, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 20px; z-index: 5; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .gk-gallery-zoom-badge { position: absolute; bottom: 14px; left: 14px; background: rgba(18, 18, 24, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #C8A96E; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 20px; z-index: 5; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(200, 169, 110, 0.35); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .gk-gallery-zoom-badge:hover { background: #C8A96E; color: #141418; border-color: #C8A96E; transform: scale(1.05); } .gk-product-thumbnails { display: flex; gap: 0.75rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(200, 169, 110, 0.3) transparent; -webkit-overflow-scrolling: touch; padding: 0.25rem 0; } .gk-product-thumbnails::-webkit-scrollbar { height: 4px; } .gk-product-thumbnails::-webkit-scrollbar-thumb { background: rgba(200, 169, 110, 0.3); border-radius: 4px; } .gk-product-gallery-thumb { flex: 0 0 75px; width: 75px; height: 75px; cursor: pointer; border: 2px solid transparent; border-radius: 8px; overflow: hidden; opacity: 0.6; transition: all 0.25s ease; background: #fcfbf9; display: flex; align-items: center; justify-content: center; padding: 4px; } .gk-product-gallery-thumb:hover, .gk-product-gallery-thumb.active { opacity: 1; border-color: var(--color-accent-gold, #C8A96E); box-shadow: 0 0 10px rgba(200, 169, 110, 0.3); background: #fff; } .gk-product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Lightbox Fullscreen Modal */ .gk-gallery-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 14, 0.95); z-index: 999999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .gk-gallery-lightbox.is-open { opacity: 1; pointer-events: auto; } .gk-lightbox-img-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; padding: 1rem; } .gk-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; transition: transform 0.25s ease-out; transform-origin: center center; user-select: none; -webkit-user-select: none; } .gk-lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; z-index: 20; transition: all 0.2s ease; } .gk-lightbox-close:hover { background: #C8A96E; color: #141418; } .gk-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.2s ease; } .gk-lightbox-nav:hover { background: #C8A96E; color: #141418; } .gk-lightbox-prev { left: 20px; } .gk-lightbox-next { right: 20px; } .gk-lightbox-hint { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; pointer-events: none; white-space: nowrap; background: rgba(0, 0, 0, 0.5); padding: 4px 14px; border-radius: 20px; } @media (max-width: 768px) { .gk-product-layout { grid-template-columns: 1fr; } .gk-product-gallery-main { min-height: 320px; max-height: 440px; } .gk-product-gallery-thumb { flex: 0 0 60px; width: 60px; height: 60px; } .gk-lightbox-prev { left: 10px; width: 38px; height: 38px; } .gk-lightbox-next { right: 10px; width: 38px; height: 38px; } } /* ========================================== BUTTONS ========================================== */ .gk-btn { display: inline-block; padding: 0.8rem 1.5rem; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 40px; text-align: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); text-decoration: none; border: 1px solid transparent; position: relative; overflow: hidden; } .gk-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .gk-btn:hover::after { left: 150%; } .gk-btn-primary { background: var(--color-text-dark, #1B1B1B); color: #FFF; border-color: var(--color-text-dark, #1B1B1B); } .gk-btn-primary:hover { background: var(--color-accent-gold, #C7A962); border-color: var(--color-accent-gold, #C7A962); color: #FFF; } .gk-btn-gold { background: var(--color-accent-gold, #C7A962); color: #FFF; border-color: var(--color-accent-gold, #C7A962); } .gk-btn-gold:hover { background: var(--color-text-dark, #1B1B1B); border-color: var(--color-text-dark, #1B1B1B); color: #FFF; } .gk-btn-whatsapp { background: #25D366; color: #FFF; border-color: #25D366; display: inline-flex; align-items: center; gap: 0.5rem; } .gk-btn-whatsapp:hover { background: #128C7E; border-color: #128C7E; color: #FFF; } /* ============================================================ SINGLE PRODUCT: SECONDARY ACTION PILLS (WhatsApp & 3D AR) ============================================================ */ .gk-product-secondary-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 1.25rem 0 1.75rem 0 !important; } .gk-action-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0.75rem 1rem !important; border-radius: 10px !important; font-size: 0.86rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0.1px !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; line-height: 1.3 !important; text-align: center !important; box-sizing: border-box !important; } .gk-action-pill svg { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; transition: transform 0.25s ease !important; } .gk-action-pill:hover svg { transform: scale(1.1) !important; } /* 1. Custom Size WhatsApp Pill */ .gk-action-pill-whatsapp { background: #F0FDF4 !important; color: #166534 !important; border: 1px solid #BBF7D0 !important; } .gk-action-pill-whatsapp svg { color: #25D366 !important; fill: #25D366 !important; } .gk-action-pill-whatsapp:hover { background: #DCFCE7 !important; border-color: #86EFAC !important; color: #14532D !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15) !important; } html[data-theme="dark"] .gk-action-pill-whatsapp, body.dark-mode .gk-action-pill-whatsapp { background: rgba(37, 211, 102, 0.08) !important; border-color: rgba(37, 211, 102, 0.25) !important; color: #86EFAC !important; } html[data-theme="dark"] .gk-action-pill-whatsapp:hover, body.dark-mode .gk-action-pill-whatsapp:hover { background: rgba(37, 211, 102, 0.16) !important; border-color: rgba(37, 211, 102, 0.4) !important; color: #BBF7D0 !important; } /* 2. 3D AR Room Visualizer Pill */ .gk-action-pill-ar { background: #FAF8F5 !important; color: #8C6D23 !important; border: 1px solid #E6DBBE !important; } .gk-action-pill-ar svg { color: #B69A64 !important; stroke: #B69A64 !important; } .gk-action-pill-ar:hover { background: #F3ECE0 !important; border-color: #D4AF37 !important; color: #6E5316 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(182, 154, 100, 0.18) !important; } html[data-theme="dark"] .gk-action-pill-ar, body.dark-mode .gk-action-pill-ar { background: rgba(182, 154, 100, 0.08) !important; border-color: rgba(182, 154, 100, 0.25) !important; color: #E6DBBE !important; } html[data-theme="dark"] .gk-action-pill-ar:hover, body.dark-mode .gk-action-pill-ar:hover { background: rgba(182, 154, 100, 0.16) !important; border-color: rgba(182, 154, 100, 0.45) !important; color: #F1EEE7 !important; } @media (max-width: 575px) { .gk-product-secondary-actions { grid-template-columns: 1fr !important; gap: 8px !important; } .gk-action-pill { padding: 0.7rem 0.9rem !important; font-size: 0.84rem !important; } } .gk-visualizer-banner { background: #1B1B1B; color: #FFF; padding: 3rem 2rem; text-align: center; border-radius: 12px; margin-top: 2rem; margin-bottom: 4rem; } .gk-visualizer-banner h2 { color: #FFF !important; margin-bottom: 1rem; font-family: var(--font-heading); } .gk-visualizer-banner p { color: #AAA; margin-bottom: 2rem; } /* ============================================================ SINGLE PRODUCT: UNIT COUNTER (STEPPER), ADD TO CART & BUY NOW ============================================================ */ .woocommerce div.product form.cart, .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } /* 1. Unit Counter / Quantity Stepper Container */ .woocommerce div.product form.cart .quantity, .woocommerce-cart table.cart .quantity, .gk-quantity-stepper { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; height: 48px !important; min-width: 120px !important; max-width: 130px !important; background: #FFFFFF !important; border: 1.5px solid #D1CFC9 !important; border-radius: 8px !important; padding: 2px !important; margin: 0 !important; box-sizing: border-box !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } html[data-theme="dark"] .woocommerce div.product form.cart .quantity, html[data-theme="dark"] .woocommerce-cart table.cart .quantity, html[data-theme="dark"] .gk-quantity-stepper { background: #232019 !important; border-color: #3A362D !important; } .woocommerce div.product form.cart .quantity:focus-within, .gk-quantity-stepper:focus-within { border-color: var(--color-accent-gold, #B69A64) !important; box-shadow: 0 0 0 2px rgba(182, 154, 100, 0.2) !important; } /* Stepper +/- Buttons */ .gk-quantity-stepper .gk-qty-btn, .quantity .gk-qty-btn { width: 36px !important; height: 100% !important; min-height: 40px !important; background: transparent !important; border: none !important; color: var(--color-text-dark, #222222) !important; font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border-radius: 6px !important; transition: all 0.2s ease !important; padding: 0 !important; user-select: none !important; } html[data-theme="dark"] .gk-quantity-stepper .gk-qty-btn, html[data-theme="dark"] .quantity .gk-qty-btn { color: #F1EEE7 !important; } .gk-quantity-stepper .gk-qty-btn:hover, .quantity .gk-qty-btn:hover { background: rgba(182, 154, 100, 0.15) !important; color: var(--color-accent-gold, #B69A64) !important; } /* Numeric Input inside Stepper */ .woocommerce div.product form.cart .quantity input.qty, .woocommerce-cart table.cart .quantity input.qty, .gk-quantity-stepper input.qty { flex: 1 !important; width: 40px !important; min-width: 30px !important; height: 100% !important; border: none !important; background: transparent !important; text-align: center !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--color-text-dark, #222222) !important; padding: 0 !important; margin: 0 !important; outline: none !important; box-shadow: none !important; -moz-appearance: textfield !important; } html[data-theme="dark"] .woocommerce div.product form.cart .quantity input.qty, html[data-theme="dark"] .woocommerce-cart table.cart .quantity input.qty, html[data-theme="dark"] .gk-quantity-stepper input.qty { color: #F1EEE7 !important; } .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button, .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* 2. Add to Cart Button */ .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce div.product form.cart button.single_add_to_cart_button, .gk-sticky-add-to-cart, button.gk-sticky-add-to-cart { flex: 1 !important; min-width: 140px !important; height: 48px !important; background: var(--color-accent-gold, #C8A96E) !important; background-color: var(--color-accent-gold, #C8A96E) !important; border: 1.5px solid var(--color-accent-gold, #C8A96E) !important; border-radius: 8px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0.75px !important; text-transform: uppercase !important; padding: 0 1.5rem !important; margin: 0 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 2px 8px rgba(200, 169, 110, 0.25) !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important; white-space: nowrap !important; opacity: 1 !important; overflow: hidden !important; } .woocommerce div.product form.cart .single_add_to_cart_button::after, .woocommerce div.product form.cart .button.alt::after, .woocommerce div.product form.cart .gk-btn-buy-now::after, .gk-sticky-add-to-cart::after { display: none !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled), .woocommerce div.product form.cart button.single_add_to_cart_button:hover:not(:disabled):not(.disabled), .gk-sticky-add-to-cart:hover:not(:disabled):not(.disabled) { background: #A88647 !important; background-color: #A88647 !important; border-color: #A88647 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(200, 169, 110, 0.45) !important; } .woocommerce div.product form.cart .single_add_to_cart_button:active:not(:disabled):not(.disabled), .gk-sticky-add-to-cart:active:not(:disabled):not(.disabled) { transform: scale(0.98) !important; } /* Add to Cart - In Cart State (Go to Cart) */ .woocommerce div.product form.cart .single_add_to_cart_button.is-go-to-cart, .gk-sticky-add-to-cart.is-go-to-cart { background: #2E7D32 !important; background-color: #2E7D32 !important; border-color: #2E7D32 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } .woocommerce div.product form.cart .single_add_to_cart_button.is-go-to-cart:hover, .gk-sticky-add-to-cart.is-go-to-cart:hover { background: #1B5E20 !important; background-color: #1B5E20 !important; border-color: #1B5E20 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35) !important; } /* Add to Cart - Update Cart State (when quantity stepper changed) */ .woocommerce div.product form.cart .single_add_to_cart_button.is-update-cart, .gk-sticky-add-to-cart.is-update-cart { background: #1B1B1B !important; background-color: #1B1B1B !important; border-color: #1B1B1B !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } .woocommerce div.product form.cart .single_add_to_cart_button.is-update-cart:hover, .gk-sticky-add-to-cart.is-update-cart:hover { background: #333333 !important; background-color: #333333 !important; border-color: #333333 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important; } /* Hide WooCommerce native added_to_cart plain text link */ .woocommerce a.added_to_cart, .woocommerce div.product form.cart a.added_to_cart, a.added_to_cart.wc-forward, .added_to_cart { display: none !important; } /* Dark Mode Add to Cart */ html[data-theme="dark"] .woocommerce div.product form.cart .single_add_to_cart_button, html[data-theme="dark"] .woocommerce div.product form.cart button.single_add_to_cart_button, html[data-theme="dark"] .single_add_to_cart_button.button, html[data-theme="dark"] .gk-sticky-add-to-cart { background: var(--color-accent-gold, #CBAE78) !important; background-color: var(--color-accent-gold, #CBAE78) !important; border: 1.5px solid var(--color-accent-gold, #CBAE78) !important; color: #121212 !important; -webkit-text-fill-color: #121212 !important; font-weight: 700 !important; letter-spacing: 0.75px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } html[data-theme="dark"] .woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled), html[data-theme="dark"] .woocommerce div.product form.cart button.single_add_to_cart_button:hover:not(:disabled):not(.disabled), html[data-theme="dark"] .single_add_to_cart_button.button:hover:not(:disabled):not(.disabled), html[data-theme="dark"] .gk-sticky-add-to-cart:hover:not(:disabled):not(.disabled) { background: #dfc491 !important; background-color: #dfc491 !important; border-color: #dfc491 !important; color: #121212 !important; -webkit-text-fill-color: #121212 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 16px rgba(203, 174, 120, 0.4) !important; } /* Spinner Animation */ @keyframes gkBtnSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gk-btn-spinner { animation: gkBtnSpin 0.75s linear infinite; display: inline-block; flex-shrink: 0; } /* 3. Buy Now Button */ .woocommerce div.product form.cart .button.alt.gk-btn-gold, .woocommerce div.product form.cart .gk-btn-buy-now, .woocommerce div.product form.cart button[name="gk_buy_now"] { flex: 1 !important; min-width: 140px !important; height: 48px !important; background: var(--color-accent-gold, #B69A64) !important; background-color: var(--color-accent-gold, #B69A64) !important; border: 1.5px solid var(--color-accent-gold, #B69A64) !important; border-radius: 8px !important; color: #FFFFFF !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; padding: 0 1.5rem !important; margin: 0 !important; cursor: pointer !important; pointer-events: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(182, 154, 100, 0.25) !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important; white-space: nowrap !important; overflow: hidden !important; } .woocommerce div.product form.cart .button.alt.gk-btn-gold:hover, .woocommerce div.product form.cart .gk-btn-buy-now:hover, .woocommerce div.product form.cart button[name="gk_buy_now"]:hover { background: #9d814d !important; background-color: #9d814d !important; border-color: #9d814d !important; color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(182, 154, 100, 0.35) !important; } @media (max-width: 576px) { .woocommerce div.product form.cart, .woocommerce div.product .woocommerce-variation-add-to-cart { gap: 10px !important; } .woocommerce div.product form.cart .quantity { min-width: 110px !important; max-width: 115px !important; height: 46px !important; } .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce div.product form.cart .gk-btn-buy-now, .woocommerce div.product form.cart button[name="gk_buy_now"] { height: 46px !important; font-size: 0.85rem !important; padding: 0 1rem !important; min-width: 105px !important; } } /* ========================================== HEADER ICONS & SEARCH OVERLAY ========================================== */ .gk-header-icons { display: flex; align-items: center; gap: 1.5rem; } .gk-header-icons a { color: var(--color-text-dark, #1B1B1B); transition: color 0.3s; position: relative; display: flex; } .gk-header-icons a:hover { color: var(--color-accent-gold, #C7A962); } .gk-header-icons svg { width: 24px; height: 24px; } .gk-theme-toggle { background: none; border: none; padding: 0; margin: 0; display: flex; align-items: center; color: var(--color-text-dark, #1B1B1B); cursor: pointer; transition: color 0.3s; } .gk-theme-toggle:hover { color: var(--color-accent-gold, #C7A962); } .gk-theme-icon-moon { display: block; } .gk-theme-icon-sun { display: none; } html[data-theme="dark"] .gk-theme-icon-moon { display: none; } html[data-theme="dark"] .gk-theme-icon-sun { display: block; } .gk-cart-count { position: absolute; top: -8px; right: -10px; background: var(--color-accent-gold, #C7A962); color: #fff; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .gk-wishlist-count { position: absolute; top: -8px; right: -10px; background: #D32F2F; color: #fff; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; /* display:flex is toggled on by JS once the count is > 0 */ } .gk-wishlist-toggle svg { transition: fill 0.2s, color 0.2s; } .gk-search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248, 247, 244, 0.97); z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme="dark"] .gk-search-overlay { background: rgba(23, 22, 19, 0.98); } .gk-search-overlay.is-visible { opacity: 1; visibility: visible; } .gk-search-overlay-inner { position: relative; width: 100%; max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; padding: 2rem; } .gk-search-close { position: absolute; top: -24px; right: 20px; background: none; border: none; font-size: 2.8rem; color: var(--color-text-dark); cursor: pointer; line-height: 1; transition: transform 0.2s ease, color 0.2s ease; } .gk-search-close:hover { color: var(--color-accent-gold); transform: scale(1.1); } .gk-search-form { display: flex; align-items: center; border-bottom: 2px solid var(--color-accent-gold); padding-bottom: 0.5rem; margin-bottom: 0.75rem; position: relative; } .gk-search-form input[type="search"] { flex: 1; border: none; background: transparent; font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 1.4rem; padding: 0.5rem 0; color: var(--color-text-dark); outline: none; box-shadow: none; } .gk-search-form input[type="search"]::placeholder { color: var(--color-text-light); font-size: 1.1rem; font-weight: 300; } .gk-search-form button { background: transparent; border: none; color: var(--color-accent-gold); cursor: pointer; padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; } .gk-search-form button svg { width: 24px; height: 24px; } /* Results & Wrap */ .gk-live-search-wrap { overflow-y: auto; max-height: calc(85vh - 120px); scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .gk-live-search-loading { display: flex; align-items: center; gap: 10px; padding: 1rem 0; color: var(--color-text-muted); font-size: 0.95rem; } .gk-search-spinner { width: 18px; height: 18px; border: 2px solid rgba(182, 154, 100, 0.25); border-top-color: var(--color-accent-gold); border-radius: 50%; animation: gk-spin 0.7s linear infinite; display: inline-block; } @keyframes gk-spin { to { transform: rotate(360deg); } } /* Popular Search Chips */ .gk-live-search-popular { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .gk-popular-title { display: block; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-muted); margin-bottom: 0.75rem; } .gk-popular-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .gk-popular-chip { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; font-size: 0.85rem; color: var(--color-text-dark); cursor: pointer; transition: all 0.2s ease; } .gk-popular-chip:hover { background: var(--color-accent-gold); border-color: var(--color-accent-gold); color: #fff; transform: translateY(-1px); } /* Results List */ .gk-live-search-results { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .gk-live-search-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-text-dark); transition: all 0.2s ease; } .gk-live-search-item:hover, .gk-live-search-item.is-selected { border-color: var(--color-accent-gold); background: rgba(182, 154, 100, 0.08); transform: translateX(4px); } .gk-search-item-img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; flex-shrink: 0; } html[data-theme="dark"] .gk-search-item-img { background: #232019; } .gk-search-item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .gk-search-item-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text-dark); margin: 0; } .gk-search-item-title mark { background: transparent; color: var(--color-accent-gold); font-weight: 700; text-decoration: underline; } .gk-search-item-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--color-text-muted); } .gk-search-item-cat { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.5px; color: var(--color-accent-gold); font-weight: 600; } .gk-search-item-price { font-size: 0.95rem; font-weight: 700; color: var(--color-text-dark); white-space: nowrap; } .gk-search-item-price del { font-size: 0.8rem; font-weight: 400; color: var(--color-text-light); margin-right: 4px; } .gk-search-item-price ins { text-decoration: none; color: var(--color-accent-gold); } /* View all button */ .gk-live-search-view-all { display: block; text-align: center; padding: 0.85rem; margin-top: 0.75rem; background: var(--color-ink, #1B1B1B); color: #fff !important; border-radius: 6px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .gk-live-search-view-all:hover { background: var(--color-accent-gold); transform: translateY(-1px); } /* Empty state */ .gk-live-search-empty { padding: 2rem 1rem; text-align: center; color: var(--color-text-muted); } .gk-live-search-empty svg { width: 36px; height: 36px; margin-bottom: 0.5rem; stroke: var(--color-accent-gold); opacity: 0.8; } /* Trust Bar */ .gk-product-trust-bar { display: flex; flex-direction: column; gap: 0.8rem; margin: 1.5rem 0; padding: 1.5rem; background: var(--color-bg-card, #FDFBF7); border: 1px solid rgba(0,0,0,0.05); border-radius: 8px; } .gk-trust-item { display: flex; align-items: center; gap: 1rem; color: var(--color-text-dark, #1B1B1B); font-size: 0.95rem; font-weight: 500; } .gk-trust-item svg { width: 20px; height: 20px; color: var(--color-accent-gold, #C7A962); flex-shrink: 0; } /* ========================================== /* ========================================== MINI CART DRAWER — G.K. ALMIRAH PREMIUM ========================================== */ .gk-mini-cart-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(18, 18, 18, 0.65) !important; z-index: 999998 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; backdrop-filter: blur(4px) !important; } .gk-mini-cart-overlay.is-visible { opacity: 1 !important; visibility: visible !important; } .gk-mini-cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; width: 100% !important; max-width: 420px !important; height: 100vh !important; background: var(--color-bg-light, #FFFFFF) !important; z-index: 999999 !important; box-shadow: -10px 0 35px rgba(0, 0, 0, 0.25) !important; transform: translateX(100%) !important; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } .gk-mini-cart-drawer.is-open { transform: translateX(0) !important; } /* Fix for WordPress admin bar */ body.admin-bar .gk-mini-cart-drawer { top: 32px !important; height: calc(100vh - 32px) !important; } @media screen and (max-width: 782px) { body.admin-bar .gk-mini-cart-drawer { top: 46px !important; height: calc(100vh - 46px) !important; } } .gk-mini-cart-drawer, .gk-mini-cart-drawer * { box-sizing: border-box !important; } .gk-mini-cart-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1.25rem 1.5rem !important; border-bottom: 1px solid var(--color-border, #EAE8E2) !important; background: var(--color-bg-card, #FDFBF7) !important; flex-shrink: 0 !important; } .gk-mini-cart-header h3 { margin: 0 !important; font-size: 1.1rem !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-weight: 700 !important; letter-spacing: 0.5px !important; color: var(--color-text-dark, #1B1B1B) !important; text-transform: uppercase !important; } .gk-mini-cart-close { background: none !important; border: none !important; font-size: 1.75rem !important; line-height: 1 !important; color: var(--color-text-muted, #777) !important; cursor: pointer !important; padding: 0.25rem !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: color 0.2s ease, transform 0.2s ease !important; } .gk-mini-cart-close:hover { color: var(--color-text-dark, #1B1B1B) !important; transform: scale(1.1) !important; } .gk-mini-cart-body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 1.25rem 1.5rem !important; display: flex !important; flex-direction: column !important; } .gk-mini-cart-body .widget_shopping_cart_content { height: 100% !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* Hide Astra and duplicate empty messages */ .ast-mini-cart-empty, .ast-mini-cart-message, .widget_shopping_cart_content > .woocommerce-mini-cart__empty-message { display: none !important; } /* Mini Cart List & Items Overrides (Strict specificity against WooCommerce/Astra) */ body .gk-mini-cart-drawer ul.woocommerce-mini-cart, body .gk-mini-cart-drawer ul.gk-mini-cart-list, body .gk-mini-cart-drawer ul.cart_list, body .gk-mini-cart-drawer ul.product_list_widget { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 1.25rem !important; } body .gk-mini-cart-drawer ul.woocommerce-mini-cart li, body .gk-mini-cart-drawer ul.gk-mini-cart-list li, body .gk-mini-cart-drawer ul.cart_list li, body .gk-mini-cart-drawer ul.product_list_widget li, body .gk-mini-cart-drawer .gk-mini-cart-item { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; padding: 0 0 1.25rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--color-border, #EAE8E2) !important; position: relative !important; width: 100% !important; float: none !important; clear: both !important; text-align: left !important; list-style: none !important; } body .gk-mini-cart-drawer ul.woocommerce-mini-cart li::before, body .gk-mini-cart-drawer ul.woocommerce-mini-cart li::after, body .gk-mini-cart-drawer ul.gk-mini-cart-list li::before, body .gk-mini-cart-drawer ul.gk-mini-cart-list li::after, body .gk-mini-cart-drawer .gk-mini-cart-item::before, body .gk-mini-cart-drawer .gk-mini-cart-item::after { display: none !important; content: none !important; } body .gk-mini-cart-drawer .gk-mini-cart-item:last-child { border-bottom: none !important; padding-bottom: 0.5rem !important; } /* Thumbnail Box */ body .gk-mini-cart-drawer .gk-mini-item-thumb { width: 72px !important; height: 72px !important; min-width: 72px !important; max-width: 72px !important; border-radius: 8px !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--color-border, #EAE8E2) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 4px !important; margin: 0 !important; position: relative !important; float: none !important; } body .gk-mini-cart-drawer .gk-mini-item-thumb a { display: flex !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important; position: static !important; float: none !important; } body .gk-mini-cart-drawer .gk-mini-item-thumb img, body .gk-mini-cart-drawer .gk-mini-cart-item img, body .gk-mini-cart-drawer ul.product_list_widget li img, body .gk-mini-cart-drawer ul.cart_list li img, body .gk-mini-cart-drawer .attachment-thumbnail { position: static !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; float: none !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; border-radius: 4px !important; box-shadow: none !important; transform: none !important; border: none !important; } /* Item Details */ body .gk-mini-cart-drawer .gk-mini-item-details { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 6px !important; } body .gk-mini-cart-drawer .gk-mini-item-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; margin: 0 !important; width: 100% !important; } body .gk-mini-cart-drawer .gk-mini-item-title { margin: 0 !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--color-text-dark, #1B1B1B) !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; word-break: break-word !important; } body .gk-mini-cart-drawer .gk-mini-item-title a { display: inline !important; padding: 0 !important; margin: 0 !important; color: inherit !important; text-decoration: none !important; font-weight: inherit !important; position: static !important; float: none !important; transition: color 0.2s ease !important; } body .gk-mini-cart-drawer .gk-mini-item-title a:hover { color: var(--color-accent-gold, #C8A96E) !important; } body .gk-mini-cart-drawer .gk-mini-item-remove { background: none !important; border: none !important; padding: 4px !important; cursor: pointer !important; color: var(--color-text-muted, #999) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: color 0.2s ease, transform 0.2s ease !important; flex-shrink: 0 !important; line-height: 1 !important; } body .gk-mini-cart-drawer .gk-mini-item-remove:hover { color: #E53935 !important; transform: scale(1.15) !important; } body .gk-mini-cart-drawer .gk-mini-item-details dl.variation { margin: 0.25rem 0 !important; font-size: 0.82rem !important; color: var(--color-text-muted, #666) !important; display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; } body .gk-mini-cart-drawer .gk-mini-item-details dl.variation dt { font-weight: 600 !important; margin: 0 !important; } body .gk-mini-cart-drawer .gk-mini-item-details dl.variation dd { margin: 0 !important; } body .gk-mini-cart-drawer .gk-mini-item-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; gap: 8px !important; width: 100% !important; } /* Stepper inside mini-cart */ body .gk-mini-cart-drawer .gk-mini-qty-stepper { display: inline-flex !important; align-items: center !important; border: 1.5px solid var(--color-border, #D8D4CA) !important; border-radius: 6px !important; background: #FFFFFF !important; overflow: hidden !important; height: 32px !important; flex-shrink: 0 !important; } body .gk-mini-cart-drawer .gk-mini-qty-btn { background: none !important; border: none !important; width: 28px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 1.1rem !important; font-weight: bold !important; color: var(--color-text-dark, #1B1B1B) !important; transition: background-color 0.15s ease, color 0.15s ease !important; user-select: none !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; } body .gk-mini-cart-drawer .gk-mini-qty-btn:hover { background: var(--color-bg-card, #F2EFE9) !important; color: var(--color-accent-gold, #C8A96E) !important; } body .gk-mini-cart-drawer .gk-mini-qty-btn:active { background: var(--color-border, #E0DDD5) !important; } body .gk-mini-cart-drawer .gk-mini-qty-num { min-width: 28px !important; text-align: center !important; font-size: 0.9rem !important; font-weight: 700 !important; color: var(--color-text-dark, #1B1B1B) !important; user-select: none !important; display: inline-block !important; line-height: 32px !important; } body .gk-mini-cart-drawer .gk-mini-item-price-wrap { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--color-text-dark, #1B1B1B) !important; text-align: right !important; white-space: nowrap !important; } body .gk-mini-cart-drawer .gk-mini-item-subtotal { color: var(--color-text-dark, #1B1B1B) !important; } /* Mini Cart Footer */ body .gk-mini-cart-drawer .gk-mini-cart-footer { margin-top: auto !important; padding-top: 1.25rem !important; border-top: 1.5px solid var(--color-border, #EAE8E2) !important; display: flex !important; flex-direction: column !important; gap: 0.9rem !important; flex-shrink: 0 !important; } body .gk-mini-cart-drawer .gk-mini-cart-subtotal { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--color-text-dark, #1B1B1B) !important; } body .gk-mini-cart-drawer .gk-mini-cart-subtotal .gk-subtotal-amount { color: var(--color-accent-gold, #C8A96E) !important; font-size: 1.25rem !important; } body .gk-mini-cart-drawer .gk-mini-cart-trust-note { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 0.82rem !important; color: #2E7D32 !important; background: rgba(46, 125, 50, 0.08) !important; padding: 0.5rem 0.75rem !important; border-radius: 6px !important; font-weight: 600 !important; } body .gk-mini-cart-drawer .gk-mini-cart-trust-note svg { flex-shrink: 0 !important; } body .gk-mini-cart-drawer .gk-mini-cart-actions { display: flex !important; gap: 0.75rem !important; } body .gk-mini-cart-drawer .gk-btn-mini-cart { flex: 1 !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; font-size: 0.9rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: all 0.25s ease !important; cursor: pointer !important; } body .gk-mini-cart-drawer .gk-btn-mini-view { background: #FFFFFF !important; color: var(--color-text-dark, #1B1B1B) !important; border: 1.5px solid var(--color-text-dark, #1B1B1B) !important; } body .gk-mini-cart-drawer .gk-btn-mini-view:hover { background: var(--color-text-dark, #1B1B1B) !important; color: #FFFFFF !important; } body .gk-mini-cart-drawer .gk-btn-mini-checkout { background: var(--color-accent-gold, #C8A96E) !important; color: #FFFFFF !important; border: 1.5px solid var(--color-accent-gold, #C8A96E) !important; box-shadow: 0 2px 8px rgba(200, 169, 110, 0.3) !important; } body .gk-mini-cart-drawer .gk-btn-mini-checkout:hover { background: #A88647 !important; border-color: #A88647 !important; box-shadow: 0 4px 12px rgba(200, 169, 110, 0.45) !important; } /* Empty State */ body .gk-mini-cart-drawer .gk-mini-cart-empty-state { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 3rem 1.5rem !important; } body .gk-mini-cart-drawer .gk-empty-cart-icon { width: 90px !important; height: 90px !important; border-radius: 50% !important; background: var(--color-bg-card, #F6F4EE) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--color-accent-gold, #C8A96E) !important; margin-bottom: 1.5rem !important; } body .gk-mini-cart-drawer .gk-empty-cart-title { font-size: 1.35rem !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-weight: 700 !important; color: var(--color-text-dark, #1B1B1B) !important; margin: 0 0 0.5rem !important; } body .gk-mini-cart-drawer .gk-empty-cart-desc { font-size: 0.92rem !important; color: var(--color-text-muted, #777) !important; max-width: 280px !important; margin: 0 0 1.75rem !important; line-height: 1.5 !important; } body .gk-mini-cart-drawer .gk-empty-cart-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.85rem 2rem !important; background: var(--color-accent-gold, #C8A96E) !important; color: #FFFFFF !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 0.92rem !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 2px 10px rgba(200, 169, 110, 0.3) !important; } body .gk-mini-cart-drawer .gk-empty-cart-cta:hover { background: #A88647 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(200, 169, 110, 0.45) !important; } /* Dark Mode Mini Cart */ html[data-theme="dark"] .gk-mini-cart-drawer { background: var(--color-bg-card, #232019) !important; } html[data-theme="dark"] .gk-mini-cart-header { background: var(--color-bg-light, #171613) !important; border-bottom-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-mini-cart-header h3 { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-mini-cart-close { color: var(--color-text-muted, #C9C4B8) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer ul.woocommerce-mini-cart li, html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-cart-item { border-bottom-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-item-thumb { background: #171613 !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-item-title { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-qty-stepper { background: #171613 !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-qty-btn { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-qty-btn:hover { background: #232019 !important; color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-qty-num { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-item-price-wrap, html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-item-subtotal { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-cart-footer { border-top-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-mini-cart-subtotal { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-btn-mini-view { background: transparent !important; color: var(--color-text-dark, #F1EEE7) !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] body .gk-mini-cart-drawer .gk-btn-mini-view:hover { background: var(--color-border, #3A362D) !important; color: #FFFFFF !important; } html[data-theme="dark"] .gk-mini-cart-footer { border-top-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-mini-cart-subtotal { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-btn-mini-view { background: transparent !important; color: var(--color-text-dark, #F1EEE7) !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-btn-mini-view:hover { background: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-empty-cart-icon { background: #171613 !important; } html[data-theme="dark"] .gk-empty-cart-title { color: var(--color-text-dark, #F1EEE7) !important; } /* ========================================== SHOP FILTERS (SIDEBAR) ========================================== */ .gk-shop-layout { display: flex; gap: 3rem; margin: 1.25rem 0 3rem 0; transition: opacity 0.3s; } .gk-shop-filters { width: 280px; flex-shrink: 0; } .gk-shop-content { flex: 1; } .gk-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-text-dark); } .gk-filter-header h3 { margin: 0; font-family: var(--font-heading); font-size: 1.4rem; } .gk-filter-clear { background: none; border: none; color: var(--color-text-dark); text-decoration: underline; cursor: pointer; font-size: 0.9rem; } .gk-shop-filters .widget { margin-bottom: 2rem; } .gk-shop-filters .widget-title { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 1rem; color: var(--color-text-dark); } .gk-shop-filters ul { list-style: none; padding: 0; margin: 0; } .gk-shop-filters ul li { margin-bottom: 0.8rem; } .gk-shop-filters ul li a { color: var(--color-text-light); text-decoration: none; display: flex; justify-content: space-between; } .gk-shop-filters ul li a:hover, .gk-shop-filters ul li.chosen a { color: var(--color-accent-gold); font-weight: 600; } .gk-shop-filters ul li .count { background: #F4F4F4; padding: 0.1rem 0.5rem; border-radius: 20px; font-size: 0.8rem; color: #666; } /* ========================================== VISUAL COLOR SWATCHES ========================================== */ .gk-hidden-select { display: none !important; } .gk-swatches-wrapper { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .gk-swatch { cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; transition: all 0.2s ease; } .gk-swatch-color { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px #DDD; } .gk-swatch-color:hover { box-shadow: 0 0 0 1px var(--color-text-dark); } .gk-swatch-color.selected { box-shadow: 0 0 0 2px var(--color-accent-gold); transform: scale(1.1); } .gk-swatch-button { padding: 8px 16px; background: var(--color-bg-card, #F4F4F4); color: var(--color-text-dark); border-radius: 4px; font-size: 0.9rem; } .gk-swatch-button:hover { background: #E0E0E0; } .gk-swatch-button.selected { background: var(--color-ink); color: #FFF; } .gk-logo img { max-height: 50px; width: auto; object-fit: contain; } .gk-trust-badge { mix-blend-mode: multiply; } /* ========================================== STICKY HEADER SCROLL EFFECT ========================================== */ .gk-header { position: sticky; top: 0; z-index: 1000; transition: all 0.3s ease; } .gk-header--scrolled { padding: 0.8rem 4rem; background: rgba(248, 247, 244, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.06); } .gk-header--hidden { transform: translateY(-100%); } /* ========================================== MOBILE MENU ========================================== */ .gk-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; z-index: 100; -webkit-tap-highlight-color: transparent; } .gk-hamburger-line { display: block; width: 22px; height: 2px; background-color: var(--color-text-dark, #1a1a1a); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.3s ease; position: relative; } .gk-hamburger-line:nth-child(1) { transform: translateY(-6px); } .gk-hamburger-line:nth-child(3) { transform: translateY(6px); } /* Animated X state when menu is open */ .gk-hamburger.is-active .gk-hamburger-line:nth-child(1) { transform: translateY(0) rotate(45deg); } .gk-hamburger.is-active .gk-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .gk-hamburger.is-active .gk-hamburger-line:nth-child(3) { transform: translateY(0) rotate(-45deg); } /* Dark mode hamburger lines */ html[data-theme="dark"] .gk-hamburger-line { background-color: var(--color-text-dark, #F1EEE7); } .gk-mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99997; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .gk-mobile-menu-overlay.is-visible { opacity: 1; visibility: visible; } .gk-mobile-menu { position: fixed; top: 0; right: 0; width: 320px; max-width: 100%; height: 100%; background: var(--color-bg-light); z-index: 99998; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: -5px 0 20px rgba(0,0,0,0.1); } .gk-mobile-menu.is-open { transform: translateX(0); } .gk-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--color-border); } .gk-mobile-menu-header h3 { font-family: var(--font-serif-logo); font-size: 1.2rem; margin: 0; } .gk-mobile-menu-close { background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--color-text-dark); } .gk-mobile-menu-body { flex: 1; overflow-y: auto; padding: 1rem 0; } .gk-mobile-menu-body ul { list-style: none; padding: 0; margin: 0; } .gk-mobile-menu-body li a { display: block; padding: 1rem 1.5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--color-text-dark); border-bottom: 1px solid rgba(0,0,0,0.04); transition: all 0.2s ease; } .gk-mobile-menu-body li a:hover { background: var(--color-bg-light); color: var(--color-accent-gold); padding-left: 2rem; } /* ========================================== STICKY PURCHASE BAR (MOBILE) ========================================== */ .gk-sticky-purchase-bar { position: fixed; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 0.65rem 1.15rem; display: none; align-items: center; justify-content: space-between; gap: 1rem; z-index: 9995; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); border-top: 1px solid rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .gk-sticky-purchase-bar { background: rgba(23, 22, 19, 0.96); border-top-color: rgba(255, 255, 255, 0.1); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35); } .gk-sticky-purchase-bar.is-visible { display: flex !important; } .gk-sticky-price-wrap { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .gk-sticky-price-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-light, #888888); font-weight: 600; line-height: 1; margin-bottom: 2px; } .gk-sticky-price { font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 1.05rem; font-weight: 700; color: var(--color-text-dark, #222222); white-space: nowrap; line-height: 1.2; } .gk-sticky-price .woocommerce-Price-amount { color: var(--color-text-dark, #222222); } html[data-theme="dark"] .gk-sticky-price, html[data-theme="dark"] .gk-sticky-price .woocommerce-Price-amount { color: #F1EEE7; } .gk-sticky-price del { font-size: 0.75rem; color: #999; font-weight: 400; margin-right: 4px; } .gk-sticky-price ins { text-decoration: none; color: var(--color-accent-gold, #B69A64); } .gk-sticky-add-to-cart { flex: 1; max-width: 240px; background: #1B1B1B !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; padding: 0.75rem 1.25rem !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.88rem !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; } .gk-sticky-add-to-cart svg { flex-shrink: 0; } .gk-sticky-add-to-cart:hover, .gk-sticky-add-to-cart:active { background: var(--color-accent-gold, #B69A64) !important; color: #FFFFFF !important; transform: translateY(-1px); } .gk-sticky-add-to-cart.is-go-to-cart { background: var(--color-accent-gold, #B69A64) !important; color: #FFFFFF !important; } .gk-sticky-add-to-cart.is-go-to-cart:hover { background: #9d814d !important; color: #FFFFFF !important; } html[data-theme="dark"] .gk-sticky-add-to-cart { background: #FFFFFF !important; color: #121212 !important; } html[data-theme="dark"] .gk-sticky-add-to-cart:hover { background: #E8E5DE !important; color: #000000 !important; } html[data-theme="dark"] .gk-sticky-add-to-cart.is-go-to-cart { background: var(--color-accent-gold, #CBAE78) !important; color: #141414 !important; } html[data-theme="dark"] .gk-sticky-add-to-cart.is-go-to-cart:hover { background: #dfc491 !important; color: #141414 !important; } @media (min-width: 769px) { .gk-sticky-purchase-bar { bottom: 0 !important; padding: 0.85rem 3rem !important; } } /* ========================================== PRODUCT PRICE DISPLAY ========================================== */ .gk-product-price-large { font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 1.45rem; font-weight: 700; color: var(--color-text-dark, #1B1B1B); margin: 0.5rem 0 1.25rem 0; line-height: 1.3; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; transition: opacity 0.2s ease; } .gk-product-price-large .woocommerce-Price-amount { color: var(--color-text-dark, #1B1B1B); } .gk-product-price-large del { font-size: 1.1rem; color: var(--color-text-muted, #888888); font-weight: 400; text-decoration: line-through; } .gk-product-price-large ins { text-decoration: none; color: var(--color-accent-gold, #B69A64); font-weight: 700; } html[data-theme="dark"] .gk-product-price-large, html[data-theme="dark"] .gk-product-price-large .woocommerce-Price-amount { color: #F1EEE7; } /* ========================================== PRODUCT SHORT DESCRIPTION & COLOR SELECTOR ========================================== */ .gk-product-short-description { color: var(--color-text-body, #4A4A4A); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; } html[data-theme="dark"] .gk-product-short-description, html[data-theme="dark"] .gk-product-short-description p { color: #D5D0C5 !important; } .gk-selected-color-label { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; font-size: 1rem; font-weight: 600; color: var(--color-text-dark, #1B1B1B); } .gk-selected-color-label span:first-child { color: var(--color-text-dark, #1B1B1B); } .gk-selected-color-dot { width: 20px; height: 20px; border-radius: 50%; background: #ccc; display: inline-block; border: 1.5px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .gk-selected-color-name { font-weight: 700; text-transform: uppercase; color: var(--color-accent-gold, #B69A64); letter-spacing: 0.5px; } .gk-color-image-swatch .gk-swatch-name { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted, #666666); margin-top: 6px; letter-spacing: 0.5px; transition: color 0.2s ease; } .gk-color-image-swatch.is-active .gk-swatch-name { color: var(--color-accent-gold, #B69A64) !important; font-weight: 800 !important; } html[data-theme="dark"] .gk-selected-color-label, html[data-theme="dark"] .gk-selected-color-label span:first-child { color: #F1EEE7 !important; } html[data-theme="dark"] .gk-selected-color-dot { border-color: rgba(255, 255, 255, 0.2); } html[data-theme="dark"] .gk-selected-color-name { color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .gk-color-image-swatch .gk-swatch-name { color: #A09D96 !important; } html[data-theme="dark"] .gk-color-image-swatch.is-active .gk-swatch-name { color: var(--color-accent-gold, #CBAE78) !important; } /* ========================================== CART NOTIFICATION TOAST ========================================== */ .gk-cart-notification { position: fixed; top: 20px; right: 20px; background: var(--color-ink); color: #FFF; padding: 1rem 1.5rem; border-radius: 8px; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 500; z-index: 100000; transform: translateY(-20px); opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 30px rgba(0,0,0,0.15); } .gk-cart-notification.is-visible { transform: translateY(0); opacity: 1; } /* ========================================== ANNOUNCEMENT BAR ========================================== */ .gk-announcement-bar { background: var(--color-ink); color: #FFF; text-align: center; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.5px; position: relative; } .gk-announcement-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #FFF; font-size: 1.2rem; cursor: pointer; opacity: 0.7; } .gk-announcement-close:hover { opacity: 1; } /* ========================================== SCROLL ANIMATIONS (Fail-Safe & Mobile Friendly) ========================================== */ .gk-animate { opacity: 1; transform: translateY(0); } @media (min-width: 769px) { .js-ready .gk-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .js-ready .gk-animate.gk-animated { opacity: 1 !important; transform: translateY(0) !important; } } /* ========================================== RESPONSIVE BREAKPOINTS ========================================== */ @media (max-width: 1024px) { .gk-header { padding: 1rem 2rem; } .gk-header--scrolled { padding: 0.6rem 2rem; } .section-title { font-size: 2rem; } } @media (max-width: 768px) { /* Header — hide nav, show hamburger */ .gk-nav { display: none !important; } .gk-hamburger { display: flex !important; } .gk-deliver-to-nav { display: none !important; } .gk-header { padding: 0.75rem 1rem; justify-content: space-between; flex-wrap: nowrap; } .gk-header-left { gap: 12px !important; } body.home .gk-header { padding: 0.75rem 1.5rem !important; } body.home .gk-header.gk-header--scrolled { padding: 0.75rem 1.5rem !important; } /* Hamburger menu is dark on white navbar */ body.home .gk-header .gk-hamburger span, .gk-hamburger span { background-color: #1a1a1a !important; } /* Ensure logo is properly scaled */ body.home .gk-header .gk-logo img, .gk-logo img { max-height: 35px !important; } .gk-header--scrolled { padding: 0.75rem 1.5rem; } .gk-logo { flex-shrink: 0; } .gk-header-icons { order: 2; margin-left: auto; gap: 0.85rem; flex-shrink: 0; } .gk-hamburger { order: 3; margin-left: 0.65rem; margin-right: 0; flex-shrink: 0; } .gk-header-icons svg { width: 20px; height: 20px; color: #1a1a1a !important; stroke: #1a1a1a !important; } /* Hero — strictly 2:1 without cropping */ .gk-hero-new { height: auto !important; aspect-ratio: 2 / 1 !important; } .gk-hero-new h1 { font-size: 2rem; } /* Section Titles */ .section-title { font-size: 1.6rem; margin: 3rem 0 2rem; } /* Shop Layout */ .gk-shop-layout { display: flex !important; flex-direction: column; gap: 0; } .gk-shop-filters { display: none; width: 100% !important; position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: 70vh; background: var(--color-bg-light); z-index: 9999; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.2); overflow-y: auto; padding: 1.5rem; } .gk-shop-filters.is-open { display: block; } .gk-shop-content { width: 100%; } /* Product Grid */ .gk-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Single Product */ .gk-product-layout { grid-template-columns: 1fr !important; gap: 1.5rem; } .gk-product-gallery-main { height: 350px; } /* Footer */ .gk-footer-grid { grid-template-columns: 1fr !important; gap: 2rem; } /* Mini Cart Drawer */ .gk-mini-cart-drawer { max-width: 100%; } /* Trust Bar */ .gk-product-trust-bar { flex-direction: column; } } @media (max-width: 480px) { .gk-grid-4 { grid-template-columns: 1fr; } .gk-header { padding: 0.8rem 1rem; } .gk-logo img { max-height: 35px; } } /* ========================================== HOMEPAGE � HERO ENHANCEMENTS ========================================== */ .gk-hero-new { position: relative !important; aspect-ratio: 2 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; background-size: contain; background-position: center; background-color: #f6f6f6; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .gk-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); } .gk-hero-content { position: relative; z-index: 2; color: #FFF; max-width: 700px; padding: 2rem; } .gk-hero-content h1 { font-family: var(--font-serif); font-size: 4rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem; line-height: 1.15; /* Astra's customizer sets a global h1 color (dark navy) directly on the h1 element, which beats the white inherited from .gk-hero-content since an explicit rule always wins over inheritance regardless of specificity — pin it to white explicitly here instead. */ color: #FFF !important; } .gk-hero-subtitle { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 300; letter-spacing: 1px; margin-bottom: 2rem; opacity: 0.85; } .gk-btn-hero { display: inline-block; padding: 1rem 3rem; border: 2px solid #FFF; color: #FFF; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: all 0.3s ease; background: transparent; } .gk-btn-hero:hover { background: #FFF; color: var(--color-ink); } /* ========================================== USP BAR ========================================== */ .gk-usp-bar { background: var(--color-bg-light); padding: 2rem 0; box-shadow: 0 4px 20px rgba(0,0,0,0.04); } .gk-usp-grid { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; } .gk-usp-item { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--color-text-dark); } .gk-usp-item svg { width: 22px; height: 22px; color: var(--color-accent-gold); flex-shrink: 0; } /* ========================================== FEATURED CATEGORIES ========================================== */ .gk-featured-cats { padding: 4rem 0; } .gk-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .gk-cat-card { position: relative; height: 400px; background-color: var(--color-bg-card); background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; transition: transform 0.3s ease; } .gk-cat-card:hover { transform: translateY(-5px); } .gk-cat-card-overlay { width: 100%; padding: 2rem; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.9) 100%); color: #FFF; } .gk-cat-card-overlay h3 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 500; margin-bottom: 0.3rem; color: #FFF !important; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .gk-cat-count { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 400; color: #FFF !important; opacity: 0.9; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* ========================================== BEST SELLERS SECTION ========================================== */ .gk-bestsellers, .gk-new-arrivals { padding: 2.5rem 0 3.5rem; } .gk-card-new { background: var(--color-bg-card); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .gk-card-new:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .gk-card-new img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .gk-card-placeholder { width: 100%; aspect-ratio: 3/4; background: var(--color-bg-card); } .gk-card-body { padding: 1.5rem; } .gk-card-body h3 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.5rem; } .gk-card-price { display: block; font-family: var(--font-sans); font-weight: 600; color: var(--color-accent-gold); margin-bottom: 1rem; } .gk-btn-pill { display: inline-block; padding: 0.6rem 1.5rem; border: 1px solid var(--color-text-dark); border-radius: 50px; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-dark); transition: all 0.3s ease; } .gk-btn-pill:hover { background: var(--color-ink); color: #FFF; } /* Load More Products Button */ .gk-load-more-wrap { display: flex; justify-content: center; align-items: center; margin-top: 2.5rem; width: 100%; } .gk-btn-load-more { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0.85rem 2.2rem !important; background: transparent !important; border: 2px solid var(--color-accent-gold, #B69A64) !important; border-radius: 50px !important; color: var(--color-text-dark, #222) !important; -webkit-text-fill-color: var(--color-text-dark, #222) !important; font-family: var(--font-sans, 'Inter', sans-serif) !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important; } .gk-btn-load-more svg { display: inline-block; vertical-align: middle; transition: transform 0.25s ease; } .gk-btn-load-more:hover { background: var(--color-accent-gold, #B69A64) !important; border-color: var(--color-accent-gold, #B69A64) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(182, 154, 100, 0.3) !important; } .gk-btn-load-more:hover svg path, .gk-btn-load-more:hover svg polyline { stroke: #ffffff; } .gk-btn-load-more.is-loading { pointer-events: none !important; opacity: 0.85 !important; } .gk-btn-load-more.is-loading .gk-btn-spinner { display: inline-block !important; } .gk-btn-load-more.is-loading .gk-btn-icon { display: none !important; } .gk-btn-load-more.is-completed { background: var(--color-bg-card, #EFEBE4) !important; border-color: var(--color-border, #D1CFC9) !important; color: var(--color-text-muted, #555) !important; -webkit-text-fill-color: var(--color-text-muted, #555) !important; } .gk-btn-load-more.is-completed:hover { background: var(--color-accent-gold, #B69A64) !important; border-color: var(--color-accent-gold, #B69A64) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================== ROOM VISUALIZER SPOTLIGHT ========================================== */ .gk-visualizer-spotlight { padding: 5rem 0; background: var(--color-bg-card); } .gk-spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .gk-spotlight-text h2 { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 1rem; } .gk-spotlight-text p { color: var(--color-text-muted); line-height: 1.8; margin-bottom: 2rem; } .gk-spotlight-mockup { background: var(--color-bg-card); border-radius: 12px; padding: 4rem 2rem; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.06); } .gk-spotlight-icon { width: 80px; height: 80px; color: var(--color-accent-gold); margin-bottom: 1rem; } .gk-spotlight-mockup span { display: block; font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-text-muted); font-weight: 500; } /* ========================================== BESPOKE SECTION (PROFESSIONAL CRAFTSMANSHIP) ========================================== */ .gk-bespoke-section { padding: 5rem 0; background: var(--color-bg-light, #FAF9F6); position: relative; } .gk-bespoke-card { background: #FFFFFF; border-radius: 20px; padding: 2.75rem 3rem; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03); border: 1px solid rgba(200, 169, 110, 0.25); position: relative; overflow: hidden; } .gk-bespoke-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #C8A96E 0%, #dfc28b 50%, #C8A96E 100%); } .gk-bespoke-grid { display: grid; grid-template-columns: 340px 1fr; gap: 3.5rem; align-items: center; } .gk-bespoke-visual { position: relative; border-radius: 14px; overflow: hidden; height: 320px; width: 100%; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); border: 1px solid rgba(200, 169, 110, 0.3); background: #1a1a1a; } .gk-bespoke-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 20% !important; display: block !important; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; } .gk-bespoke-card:hover .gk-bespoke-img { transform: scale(1.05); } .gk-bespoke-badge-overlay { position: absolute; bottom: 12px; left: 12px; background: rgba(15, 17, 21, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; padding: 6px 14px; border-radius: 50px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.3px; border: 1px solid rgba(200, 169, 110, 0.45); display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); z-index: 2; } .gk-bespoke-badge-overlay .gk-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #C8A96E; box-shadow: 0 0 8px #C8A96E; display: inline-block; } .gk-bespoke-tag { color: #C8A96E; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.6rem; display: block; } .gk-bespoke-text h2 { font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 2.1rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--color-text-dark, #111111); line-height: 1.25; } .gk-bespoke-text p { color: var(--color-text-muted, #555555); line-height: 1.65; margin-bottom: 1.5rem; font-size: 0.98rem; } .gk-bespoke-list { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2rem; } .gk-bespoke-item { background: rgba(200, 169, 110, 0.1); color: var(--color-text-dark, #1a1a1a); padding: 0.45rem 1.15rem; border-radius: 50px; font-size: 0.84rem; font-weight: 600; border: 1px solid rgba(200, 169, 110, 0.32); display: inline-flex; align-items: center; gap: 5px; } .gk-bespoke-text .gk-btn-cart { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 2rem; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.4px; border-radius: 8px; background: var(--color-accent-gold, #C8A96E); color: #141414; text-decoration: none; border: none; box-shadow: 0 4px 15px rgba(200, 169, 110, 0.35); transition: all 0.3s ease; } .gk-bespoke-text .gk-btn-cart:hover { background: #dfc28b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200, 169, 110, 0.5); color: #141414; } /* Bespoke Section - Dark Mode */ html[data-theme="dark"] .gk-bespoke-section { background: #0e1014 !important; } html[data-theme="dark"] .gk-bespoke-card { background: #16181f !important; border-color: rgba(200, 169, 110, 0.3) !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important; } html[data-theme="dark"] .gk-bespoke-text h2 { color: #ffffff !important; } html[data-theme="dark"] .gk-bespoke-text p { color: rgba(255, 255, 255, 0.78) !important; } html[data-theme="dark"] .gk-bespoke-item { background: rgba(200, 169, 110, 0.12) !important; color: #ffffff !important; border-color: rgba(200, 169, 110, 0.35) !important; } .gk-btn-outline { display: inline-block; padding: 0.9rem 2.5rem; border: 2px solid var(--color-accent-gold, #C8A96E); background: var(--color-accent-gold, #C8A96E); color: #111111; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 50px; transition: all 0.3s ease; text-decoration: none; box-shadow: 0 4px 15px rgba(200, 169, 110, 0.3); } .gk-btn-outline:hover { background: #111111; border-color: #111111; color: #FFFFFF; transform: translateY(-2px); } /* ========================================== HERITAGE / STATS SECTION ========================================== */ .gk-heritage-section { padding: 5rem 0; background: var(--color-bg-light); } .gk-stats-grid { display: flex; justify-content: center; gap: 5rem; margin-top: 2rem; } .gk-stat-item { text-align: center; } .gk-stat-number { display: block; font-family: var(--font-serif); font-size: 3.5rem; font-weight: 500; color: var(--color-accent-gold); line-height: 1; margin-bottom: 0.5rem; } .gk-stat-label { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; } /* ========================================== HOMEPAGE TRUST BADGES MARQUEE ========================================== */ .gk-homepage-trust { padding: 3.5rem 0 4rem; overflow: hidden !important; position: relative; } .gk-trust-badges-wrapper { text-align: center; width: 100%; overflow: hidden; } .gk-trust-label { display: block; margin-bottom: 2rem; font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted, #777); letter-spacing: 2px; text-transform: uppercase; } .gk-trust-marquee-container { display: flex !important; width: 100% !important; overflow: hidden !important; user-select: none !important; -webkit-user-select: none !important; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; padding: 0.5rem 0; } .gk-trust-marquee-track { display: flex !important; flex-shrink: 0 !important; align-items: center !important; justify-content: space-around !important; min-width: 100% !important; gap: 3.5rem !important; animation: gkTrustMarqueeScroll 28s linear infinite !important; will-change: transform; padding-right: 3.5rem; } .gk-trust-marquee-container:hover .gk-trust-marquee-track { animation-play-state: paused !important; } @keyframes gkTrustMarqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .gk-trust-badge-item { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; flex-shrink: 0 !important; padding: 0.5rem 1rem !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .gk-trust-badge-item:hover { transform: translateY(-4px) !important; } .gk-trust-badge-item img, .gk-trust-badge { height: 75px !important; width: auto !important; max-width: 140px !important; object-fit: contain !important; filter: none !important; -webkit-filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; transition: transform 0.3s ease, filter 0.3s ease !important; display: block !important; } .gk-trust-badge-item:hover img, .gk-trust-badge-item:hover .gk-trust-badge { transform: scale(1.08) !important; } .gk-trust-badge-item span { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--color-text-dark, #1a1a1a) !important; letter-spacing: 0.3px !important; white-space: nowrap !important; line-height: 1.2 !important; } html[data-theme="dark"] .gk-trust-badge-item span { color: #f0ede6 !important; } @media (max-width: 768px) { .gk-trust-marquee-track { gap: 2rem !important; padding-right: 2rem !important; animation-duration: 20s !important; } .gk-trust-badge-item img, .gk-trust-badge { height: 60px !important; } .gk-trust-badge-item span { font-size: 0.75rem !important; } } /* ========================================== FOLLOW US / SOCIAL SECTION ========================================== */ .gk-social-section { padding: 4rem 0 5rem; background: var(--color-bg-card); } .gk-social-lede { color: var(--color-text-muted); max-width: 560px; margin: 0.75rem auto 2.5rem; } .gk-social-follow-row { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; } .gk-social-follow-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.75rem; border: 1px solid var(--color-text-dark); border-radius: 50px; color: var(--color-text-dark); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.3s ease; } .gk-social-follow-btn svg { width: 20px; height: 20px; } .gk-social-follow-btn:hover { background: var(--color-ink); color: var(--color-bg-light); } .gk-social-feed { margin-bottom: 2rem; } .gk-social-feed:last-child { margin-bottom: 0; } /* ========================================== HOMEPAGE RESPONSIVE ========================================== */ @media (max-width: 768px) { .gk-hero-content h1 { font-size: 2rem; } .gk-hero-subtitle { font-size: 0.95rem; } .gk-usp-grid { gap: 1.5rem; } .gk-usp-item { font-size: 0.8rem; } .gk-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gk-cat-card { height: auto !important; aspect-ratio: 3 / 4; } .gk-spotlight-grid { grid-template-columns: 1fr; gap: 2rem; } .gk-bespoke-grid { grid-template-columns: 1fr; gap: 1.75rem; } .gk-bespoke-card { padding: 1.75rem 1.25rem !important; } .gk-bespoke-visual { height: 230px !important; } .gk-bespoke-text h2 { font-size: 1.6rem !important; } .gk-stats-grid { gap: 2rem; flex-wrap: wrap; } .gk-stat-number { font-size: 2.5rem; } } /* ========================================== CART & CHECKOUT ENHANCEMENTS (DESKTOP) ========================================== */ .woocommerce-cart .woocommerce { margin-top: 3rem; margin-bottom: 5rem; } .woocommerce-cart .woocommerce:has(.woocommerce-cart-form) { display: flex; flex-wrap: wrap; gap: 4rem; } /* Empty Cart Enhancements */ .woocommerce-cart .woocommerce .gk-empty-cart { text-align: center; padding: 5rem 2rem; background: var(--color-bg-card); border-radius: 12px; } .woocommerce-cart .woocommerce .gk-empty-cart h2 { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-text-dark); margin-bottom: 1rem; } .woocommerce-cart .woocommerce .gk-empty-cart p { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 2rem; } .woocommerce-cart .woocommerce .gk-empty-cart a.button { background: var(--color-accent-gold); color: #FFF; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: 0.3s; } .woocommerce-cart .woocommerce .gk-empty-cart a.button:hover { background: var(--color-ink); } .woocommerce-cart .woocommerce > p.return-to-shop { display: none !important; /* Hide duplicate standard WooCommerce button */ } .woocommerce-cart .woocommerce-cart-form { flex: 1 1 60%; } .woocommerce-cart .cart-collaterals { flex: 1 1 30%; } .woocommerce-cart table.cart { border-collapse: collapse; width: 100%; border: none; border-radius: 0; } .woocommerce-cart table.cart th { background: transparent; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text-dark); border-bottom: 2px solid var(--color-border); padding: 1rem 0; text-transform: uppercase; letter-spacing: 1px; } .woocommerce-cart table.cart td { padding: 1.5rem 0; border-top: none; border-bottom: 1px solid #EEE; vertical-align: middle; } .woocommerce-cart table.cart .product-thumbnail img { width: 90px; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .woocommerce-cart table.cart .product-name a { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; color: var(--color-text-dark); } .woocommerce-cart table.cart .product-price, .woocommerce-cart table.cart .product-subtotal { font-weight: 600; color: var(--color-accent-gold); } .woocommerce-cart table.cart .product-remove a { color: #FF4A4A !important; font-size: 1.5rem; font-weight: 400; } .woocommerce-cart table.cart .product-remove a:hover { background: transparent; color: #D32F2F !important; } .woocommerce-cart .cart_totals { background: var(--color-bg-card); padding: 2.5rem; border-radius: 12px; position: sticky; top: 100px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.03); } .woocommerce-cart .cart_totals h2 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1.5rem; border-bottom: 2px solid #D1CFC9; padding-bottom: 1rem; } .woocommerce-cart .cart_totals table { width: 100%; border: none; margin-bottom: 2rem; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 1rem 0; border-bottom: 1px solid #E0DCD3; background: transparent; } .woocommerce-cart .cart_totals table th { font-weight: 500; color: var(--color-text-muted); } .woocommerce-cart .cart_totals table td { text-align: right; font-weight: 600; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; background: var(--color-ink); color: #FFF; padding: 1.2rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 50px; transition: all 0.3s ease; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--color-accent-gold); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(182, 154, 100, 0.2); } .woocommerce-cart .coupon { display: flex; gap: 1rem; margin-bottom: 1.5rem; width: 100%; } .woocommerce-cart .coupon input.input-text { flex: 1; padding: 0.8rem 1.2rem; border: 1px solid var(--color-border); border-radius: 50px; outline: none; font-family: var(--font-sans); } .woocommerce-cart .coupon button.button { padding: 0.8rem 1.5rem; border-radius: 50px; background: var(--color-bg-card); color: var(--color-text-dark); border: 1px solid var(--color-text-dark); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .woocommerce-cart .coupon button.button:hover { background: var(--color-ink); color: #FFF; } .woocommerce-cart .actions > button.button { padding: 0.8rem 2rem; border-radius: 50px; background: var(--color-ink); color: #FFF; border: none; font-weight: 600; text-transform: uppercase; cursor: pointer; float: right; margin-top: 1rem; } /* ========================================== GK CUSTOM CART TEMPLATE (woocommerce/cart/cart.php overrides WC's default table markup with .gk-cart-* classes — styled here, since the block above only matches the old default table.cart markup, which this template no longer emits) ========================================== */ .gk-cart-page { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem 6rem; } .gk-cart-title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-text-dark); margin-bottom: 2rem; } .gk-cart-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; } .gk-cart-items { flex: 1 1 60%; min-width: 0; } .gk-cart-item { display: grid; grid-template-columns: auto 90px 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); } .gk-cart-item-remove a { display: block; color: var(--color-text-light); font-size: 1.5rem; line-height: 1; text-decoration: none; transition: color 0.2s ease; } .gk-cart-item-remove a:hover { color: #D32F2F; } .gk-cart-item-thumbnail img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); } .gk-cart-item-details { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem 1.5rem; } .gk-cart-item-name { grid-column: 1 / -1; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; } .gk-cart-item-name a { color: var(--color-text-dark); } .gk-cart-item-price { color: var(--color-text-muted); font-weight: 500; } .gk-cart-item-quantity .qty { width: 70px; padding: 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-sans); text-align: center; background: #FFF; color: var(--color-ink); } .gk-cart-item-subtotal { font-weight: 700; color: var(--color-accent-gold); text-align: right; min-width: 90px; } .gk-cart-summary { flex: 1 1 32%; min-width: 280px; } .gk-cart-summary-inner { background: var(--color-bg-card); padding: 2.5rem; border-radius: 12px; position: sticky; top: 100px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .gk-cart-summary-inner h2 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--color-border); padding-bottom: 1rem; } .gk-coupon-box { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .gk-coupon-box input.input-text { flex: 1; min-width: 0; padding: 0.8rem 1.2rem; border: 1px solid var(--color-border); border-radius: 50px; font-family: var(--font-sans); } .gk-cart-trust-badges { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.85rem; } .gk-cart-trust-badges p { margin: 0.25rem 0; } .woocommerce .gk-cart-form button.button.gk-cart-update-btn { display: inline-block; margin: 0.5rem 0 1rem; padding: 0.7rem 1.75rem; background: #FFF !important; color: var(--color-ink) !important; border: 1px solid var(--color-ink) !important; border-radius: 50px; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; } .woocommerce .gk-cart-form button.button.gk-cart-update-btn:hover { background: var(--color-ink) !important; color: #FFF !important; } @media (max-width: 900px) { .gk-cart-layout { flex-direction: column; } .gk-cart-summary { width: 100%; } .gk-cart-summary-inner { position: static; } } @media (max-width: 600px) { .gk-cart-page { padding: 2rem 1.25rem 4rem; } .gk-cart-item { grid-template-columns: auto 70px 1fr; gap: 1rem; } .gk-cart-item-thumbnail img { width: 70px; height: 70px; } .gk-cart-item-details { grid-template-columns: 1fr; gap: 0.4rem; } .gk-cart-item-subtotal { text-align: left; } } /* ========================================== WOOCOMMERCE CART & CHECKOUT RESPONSIVE (MOBILE-FIRST) ========================================== */ @media (max-width: 768px) { .woocommerce table.shop_table_responsive thead { display: none; } /* Cart Items on Mobile */ .woocommerce table.shop_table.cart tbody tr { display: block; margin-bottom: 1.25rem; border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem; background: var(--color-bg-card); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .woocommerce table.shop_table.cart tbody td { display: flex; justify-content: space-between; align-items: center; text-align: right; border-bottom: 1px solid var(--color-border); padding: 0.75rem 0 !important; } .woocommerce table.shop_table.cart tbody td:last-child { border-bottom: none; } .woocommerce table.shop_table.cart tbody td::before { content: attr(data-title) ': '; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; color: var(--color-text-muted); } .woocommerce table.shop_table.cart tbody td.product-remove { display: block; text-align: right; border-bottom: none; padding: 0 !important; } .woocommerce table.shop_table.cart tbody td.product-remove::before { display: none; } .woocommerce table.shop_table.cart tbody td.product-thumbnail { justify-content: center; padding: 0.5rem 0 !important; } .woocommerce table.shop_table.cart tbody td.product-thumbnail::before { display: none; } .woocommerce table.shop_table.cart tbody td.product-thumbnail img { width: 75px; height: 75px; object-fit: cover; border-radius: 8px; } /* Cart Summary / Totals on Mobile — Unified clean card */ .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; padding: 0 !important; margin-top: 1.5rem !important; } .woocommerce-cart .cart_totals { background: var(--color-bg-card) !important; border: 1px solid var(--color-border) !important; border-radius: 12px !important; padding: 1.25rem 1.25rem 1.5rem !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; } .woocommerce-cart .cart_totals h2 { font-family: var(--font-heading); font-size: 1.4rem !important; color: var(--color-text-dark); margin: 0 0 1rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--color-border) !important; } .woocommerce-cart .cart_totals table.shop_table { width: 100% !important; border: none !important; margin: 0 0 1rem !important; } .woocommerce-cart .cart_totals table tr, .woocommerce-cart .cart_totals table.shop_table_responsive tbody tr { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0.75rem 0 !important; margin-bottom: 0 !important; border: none !important; border-bottom: 1px solid var(--color-border) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } .woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals, .woocommerce-cart .cart_totals table.shop_table_responsive tbody tr.woocommerce-shipping-totals { align-items: flex-start !important; flex-wrap: wrap !important; } .woocommerce-cart .cart_totals table th { display: inline-block !important; text-align: left !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--color-text-muted) !important; font-weight: 600 !important; padding: 0 !important; width: auto !important; border: none !important; } .woocommerce-cart .cart_totals table td { display: block !important; text-align: right !important; font-size: 0.95rem !important; color: var(--color-text-dark) !important; padding: 0 !important; border: none !important; background: transparent !important; width: auto !important; } .woocommerce-cart .cart_totals table td::before { content: none !important; display: none !important; } .woocommerce-cart .cart_totals table tr.order-total th { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--color-text-dark) !important; } .woocommerce-cart .cart_totals table tr.order-total td strong .amount { font-size: 1.3rem !important; color: var(--color-accent-gold) !important; font-weight: 700 !important; } .woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 400; margin-top: 0.3rem; text-align: right; } .woocommerce-cart .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; } .woocommerce-cart .wc-proceed-to-checkout { display: block !important; width: 100% !important; margin-top: 1.25rem !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; background: var(--color-accent-gold) !important; color: #ffffff !important; padding: 1rem 1.5rem !important; border-radius: 50px !important; font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; box-shadow: 0 4px 15px rgba(182, 154, 100, 0.35) !important; min-height: 50px !important; box-sizing: border-box !important; text-decoration: none !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--color-ink) !important; } /* Coupon Box on Mobile */ .gk-coupon-box, .woocommerce-cart .coupon { display: flex !important; gap: 0.5rem !important; margin-top: 1rem !important; width: 100% !important; } .gk-coupon-box input.input-text, .woocommerce-cart .coupon input.input-text { flex: 1 1 auto !important; min-width: 0 !important; padding: 0.75rem 1rem !important; font-size: 16px !important; border-radius: 6px !important; } .gk-coupon-box button, .woocommerce-cart .coupon button { flex: 0 0 auto !important; padding: 0.75rem 1.25rem !important; font-size: 0.85rem !important; border-radius: 6px !important; white-space: nowrap !important; } } .woocommerce-cart table.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 50px; overflow: hidden; background: var(--color-bg-card); } .woocommerce-cart table.cart .quantity input.qty { width: 50px; height: 40px; border: none; text-align: center; font-weight: 600; -moz-appearance: textfield; background: #FFF; color: var(--color-ink); } .woocommerce-cart table.cart .quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart table.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .woocommerce-cart table.cart .quantity .qty-btn { width: 35px; height: 40px; background: transparent; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-text-muted); } .woocommerce-cart table.cart .quantity .qty-btn:hover { color: var(--color-text-dark); } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { width: 100%; flex: 1 1 100%; } /* ========================================== CHECKOUT STYLES & MOBILE ENHANCEMENTS ========================================== */ .woocommerce-checkout .woocommerce { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 2rem; margin-bottom: 4rem; } .woocommerce-checkout .woocommerce-notices-wrapper, .woocommerce-checkout .woocommerce-form-login-toggle, .woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce-checkout .woocommerce-form-login, .woocommerce-checkout .woocommerce-form-coupon { width: 100%; flex: 1 1 100%; } .woocommerce-checkout #customer_details { flex: 1 1 55%; min-width: 0; } .woocommerce-checkout #order_review_heading { display: none; } .woocommerce-checkout #order_review { flex: 1 1 38%; background: var(--color-bg-card); padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: 12px; border: 1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,0.03); min-width: 0; } .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-text-dark); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); } .woocommerce-checkout form .form-row { margin-bottom: 1.25rem; } .woocommerce-checkout form .form-row label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-dark); margin-bottom: 0.35rem; } .woocommerce-checkout form .form-row label .required { color: #e53935; font-weight: bold; } .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row select, .woocommerce-checkout form .form-row textarea { width: 100%; padding: 0.85rem 1rem; font-size: 16px; /* Prevents auto-zoom on iOS mobile */ border: 1px solid var(--color-border); border-radius: 6px; outline: none; font-family: var(--font-sans); background-color: var(--color-bg-light); color: var(--color-text-dark); box-sizing: border-box; transition: border-color 0.25s, box-shadow 0.25s; } .woocommerce-checkout form .form-row input.input-text:focus, .woocommerce-checkout form .form-row select:focus, .woocommerce-checkout form .form-row textarea:focus { border-color: var(--color-accent-gold); box-shadow: 0 0 0 3px rgba(182, 154, 100, 0.18); } .woocommerce-checkout form .form-row .description { font-size: 0.775rem; color: var(--color-text-muted); margin-top: 0.3rem; line-height: 1.4; } .woocommerce-checkout #place_order { background: var(--color-accent-gold) !important; color: #FFF !important; border: none !important; padding: 1.1rem 1.5rem !important; border-radius: 50px !important; font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px; width: 100% !important; cursor: pointer; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(182, 154, 100, 0.35); min-height: 52px; } .woocommerce-checkout #place_order:hover { background: var(--color-ink) !important; transform: translateY(-2px); } /* Payment Methods on Mobile */ .woocommerce-checkout #payment { background: transparent !important; border: none !important; padding: 0 !important; } .woocommerce-checkout #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 1.5rem 0 !important; border-top: 1px solid var(--color-border); padding-top: 1rem !important; } .woocommerce-checkout #payment ul.payment_methods li { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; cursor: pointer; font-size: 0.9rem; color: var(--color-text-dark); } .woocommerce-checkout #payment div.payment_box { background: transparent !important; padding: 0.5rem 0 0 !important; margin: 0 !important; font-size: 0.85rem; color: var(--color-text-muted); } .woocommerce-checkout #payment div.payment_box::before { display: none !important; } @media (max-width: 768px) { /* Mobile Cart & Checkout Layout Fixes */ .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { flex-direction: column; gap: 1.5rem; margin-top: 1rem; margin-bottom: 2rem; } .woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals, .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { flex: 1 1 100%; width: 100%; } .woocommerce-checkout form .form-row.form-row-first, .woocommerce-checkout form .form-row.form-row-last { width: 100% !important; float: none !important; } /* Padding bottom to never get covered by mobile bottom navigation */ .gk-cart-page, .woocommerce-checkout, .woocommerce-cart { padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; } } .woocommerce-cart .woocommerce::before, .woocommerce-cart .woocommerce::after, .woocommerce-checkout .woocommerce::before, .woocommerce-checkout .woocommerce::after { display: none !important; } /* Hide redundant Astra page titles on Cart & Checkout */ .woocommerce-cart .ast-article-single .entry-header, .woocommerce-checkout .ast-article-single .entry-header { display: none !important; } /* ========================================== GK INFO PAGES (About, Contact, Privacy, Return & Replacement, Delivery, Terms) Shared premium styling for content pages rendered through page.php's .gk-page-content ========================================== */ .gk-info-page { max-width: 900px; margin: 0 auto; } .gk-info-lede { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.6; color: var(--color-text-dark); margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); } .gk-info-page h2 { font-size: 1.75rem; margin: 2.75rem 0 1rem; color: var(--color-text-dark); } .gk-info-page h2:first-of-type { margin-top: 0; } .gk-info-page h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-gold); margin: 1.75rem 0 0.5rem; } .gk-info-page p, .gk-info-page li { font-family: var(--font-sans); font-size: 1rem; line-height: 1.75; color: var(--color-text-muted); } .gk-info-page ul, .gk-info-page ol { padding-left: 1.25rem; margin: 0 0 1.25rem; } .gk-info-page li { margin-bottom: 0.5rem; } .gk-info-page strong { color: var(--color-text-dark); } .gk-info-page a { color: var(--color-accent-gold); text-decoration: underline; } .gk-info-page a:hover { color: var(--color-text-dark); } .gk-info-callout { background: var(--color-bg-card); border-left: 3px solid var(--color-accent-gold); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .gk-info-callout p:last-child { margin-bottom: 0; } .gk-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .gk-info-card { background: var(--color-bg-card); padding: 1.75rem; border: 1px solid var(--color-border); } .gk-info-card h3 { margin-top: 0; } .gk-info-card p { margin-bottom: 0; } .gk-info-card p a { font-family: var(--font-sans); } .gk-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; text-align: center; } .gk-stats-row div { padding: 1.5rem 1rem; border-top: 2px solid var(--color-accent-gold); } .gk-stats-row strong { display: block; font-family: var(--font-serif); font-size: 2.25rem; color: var(--color-text-dark); } .gk-stats-row span { font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); } .gk-cta-banner { background: var(--color-ink); color: #FFF; padding: 2.5rem; text-align: center; margin: 3rem 0 1rem; } .gk-cta-banner h2 { color: #FFF !important; margin-top: 0; } .gk-cta-banner p { color: #DDD; } .gk-cta-banner .gk-btn { display: inline-block; margin-top: 0.75rem; padding: 0.85rem 2rem; background: var(--color-accent-gold); color: #FFF; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; font-size: 0.85rem; } .gk-cta-banner .gk-btn:hover { background: #FFF; color: var(--color-ink); } @media (max-width: 600px) { .gk-info-lede { font-size: 1.15rem; } .gk-info-page h2 { font-size: 1.4rem; } .gk-cta-banner { padding: 1.75rem 1.25rem; } } /* NOTE: checkout page branding lives in functions.php (gk_enqueue_scripts) as an inline style attached to the gk-google-fonts handle — CartFlows' checkout "canvas" template dequeues this file (astra-parent-style / gk-child-style) entirely, so rules added here never reach that page. */ /* ========================================== HOMEPAGE TESTIMONIALS SECTION ========================================== */ .gk-testimonials-section { padding: 5rem 0; background: var(--color-bg-light); } .gk-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; } .gk-testimonial-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 2rem 1.75rem; display: flex; flex-direction: column; } .gk-testimonial-stars { color: var(--color-accent-gold); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 1rem; } .gk-testimonial-quote { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; color: var(--color-text-dark); flex-grow: 1; margin-bottom: 1.5rem; } .gk-testimonial-author { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); padding-top: 1rem; } .gk-testimonial-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--color-text-dark); } .gk-testimonial-location { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-text-muted); } @media (max-width: 900px) { .gk-testimonials-grid { grid-template-columns: 1fr; } } /* ========================================== HOMEPAGE FAQ SECTION ========================================== */ .gk-container-narrow { max-width: 820px; } .gk-faq-section { padding: 5rem 0; } .gk-faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .gk-faq-item { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 6px; padding: 0; overflow: hidden; } .gk-faq-item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--color-text-dark); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: color 0.2s ease; } .gk-faq-item summary::-webkit-details-marker { display: none; } .gk-faq-item summary::after { content: '+'; flex-shrink: 0; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--color-accent-gold); transition: transform 0.25s ease; } .gk-faq-item[open] summary::after { transform: rotate(45deg); } .gk-faq-item summary:hover { color: var(--color-accent-gold); } .gk-faq-item[open] summary { border-bottom: 1px solid var(--color-border); } .gk-faq-answer { padding: 1.1rem 1.5rem 1.4rem; } .gk-faq-answer p { margin: 0; color: var(--color-text-muted); line-height: 1.65; font-size: 0.95rem; } .gk-faq-answer a { color: var(--color-accent-gold); text-decoration: underline; } .gk-faq-more { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: var(--color-text-muted); } .gk-faq-more a { color: var(--color-accent-gold); text-decoration: underline; } @media (max-width: 600px) { .gk-faq-section { padding: 3rem 0; } .gk-faq-item summary { padding: 1rem 1.1rem; font-size: 0.95rem; } .gk-faq-answer { padding: 0 1.1rem 1.1rem; } } /* ========================================== BLOG INDEX / ARCHIVE (index.php) Used for the blog list, category/tag/date archives, and search results — .gk-heading-lg is also used (unstyled until now) on single.php/page.php. ========================================== */ .gk-heading-lg { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 500; line-height: 1.2; color: var(--color-text-dark); } .gk-blog-index { padding: 4rem 0 5rem; } .gk-blog-index-header { text-align: center; margin-bottom: 3rem; } .gk-blog-index-header span { color: var(--color-accent-gold); } .gk-blog-archive-description { max-width: 600px; margin: 1rem auto 0; color: var(--color-text-muted); } .gk-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .gk-blog-card { background: var(--color-bg-card); border: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; } .gk-blog-card-thumb { display: block; aspect-ratio: 4 / 3; background: var(--color-bg-light); overflow: hidden; } .gk-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gk-blog-card-thumb:hover img { transform: scale(1.05); } .gk-blog-card-thumb-placeholder { width: 100%; height: 100%; background: var(--color-border); } .gk-blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .gk-blog-card-date { font-size: 0.8rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .gk-blog-card-title { font-size: 1.25rem; margin-bottom: 0.75rem; } .gk-blog-card-title a { color: var(--color-text-dark); text-decoration: none; } .gk-blog-card-title a:hover { color: var(--color-accent-gold); } .gk-blog-card-excerpt { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem; flex-grow: 1; } .gk-blog-card .gk-btn-pill { align-self: flex-start; padding: 0.6rem 1.5rem; width: auto; } .gk-blog-pagination { margin-top: 3rem; border-top: 1px solid var(--color-border); padding-top: 2rem; } .gk-blog-pagination .nav-links { display: flex; justify-content: center; gap: 0.5rem; } .gk-blog-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-dark); font-family: var(--font-sans); font-weight: 500; text-decoration: none; transition: all 0.3s ease; } .gk-blog-pagination .page-numbers.current, .gk-blog-pagination .page-numbers:hover { background: var(--color-accent-gold); border-color: var(--color-accent-gold); color: #ffffff; } .gk-blog-empty { text-align: center; padding: 4rem 0; color: var(--color-text-muted); } .gk-blog-empty p { margin-bottom: 1.5rem; font-size: 1.1rem; } @media (max-width: 600px) { .gk-heading-lg { font-size: 1.9rem; } .gk-blog-index { padding: 2.5rem 0 3rem; } .gk-blog-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* ============================================================ LUXURY PROFESSIONAL WEBSITE UI ENHANCEMENTS ============================================================ */ /* 1. Header & Navigation Refinement */ .gk-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background-color: #FFFFFF !important; background: #FFFFFF !important; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; border-bottom: 1px solid #f0f0f0 !important; padding: 0.8rem 3rem; max-width: 100%; box-sizing: border-box; } /* Desktop navbar layout fix — only above mobile breakpoint */ .gk-header-left { flex-shrink: 0; } @media (min-width: 769px) { .gk-nav { flex: 1; display: flex; justify-content: center; } .gk-nav ul { gap: 1.5rem; flex-wrap: nowrap; align-items: center; justify-content: center; } .gk-nav a { white-space: nowrap; } } @media (min-width: 769px) and (max-width: 1200px) { .gk-nav ul { gap: 1rem; } .gk-header { padding: 0.8rem 1.5rem; } } @media (min-width: 769px) and (max-width: 1024px) { .gk-nav ul { gap: 0.75rem; } .gk-nav a { font-size: 0.7rem !important; letter-spacing: 1px !important; } } body.admin-bar .gk-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .gk-header { top: 46px !important; } } html[data-theme="dark"] .gk-header { background-color: rgba(23, 22, 19, 0.95) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } .gk-logo img, .gk-logo .custom-logo { max-height: 48px; width: auto; object-fit: contain; display: block; } /* Dark mode logo swap */ .gk-dark-logo-link { display: none !important; } .gk-dark-logo { max-height: 48px; width: auto; object-fit: contain; } html[data-theme="dark"] .gk-logo .custom-logo-link { display: none !important; } html[data-theme="dark"] .gk-logo .gk-dark-logo-link { display: block !important; } .gk-header-icons { display: flex; align-items: center; gap: 1.25rem; } .gk-nav a { position: relative; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.75rem; font-weight: 500; color: #1a1a1a !important; } .gk-nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-accent-gold); transition: width 0.3s ease; } .gk-nav a:hover::after { width: 100%; } .gk-cart-count, .gk-wishlist-count { background-color: var(--color-accent-gold) !important; color: #fff !important; font-weight: 700; font-size: 0.7rem; padding: 2px 7px; border-radius: 50px; } /* 2. Hero Section Refinement - Full-Bleed 2:1 Product Banners (No Cropping) */ .gk-hero-new { position: relative !important; aspect-ratio: 2 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; overflow: hidden !important; background-color: #f6f6f6 !important; } .gk-hero-bg-slides { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; overflow: hidden !important; } .gk-hero-bg-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; transform: none !important; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .gk-hero-bg-slide.is-active { opacity: 1 !important; } .gk-hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%); } .gk-hero-content { position: relative; z-index: 3; max-width: 900px; margin-bottom: 3.5rem; } .gk-hero-eyebrow { margin-bottom: 1.5rem; } .gk-eyebrow-badge { display: inline-block; padding: 0.5rem 1.25rem; background: rgba(182, 154, 100, 0.22); border: 1px solid var(--color-accent-gold); color: var(--color-accent-gold); border-radius: 50px; font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; backdrop-filter: blur(8px); } .gk-hero-content h1 { font-size: 3.8rem; font-weight: 400; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 1.25rem; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .gk-hero-subtitle { font-size: 1.25rem; font-weight: 300; max-width: 700px; margin: 0 auto 2.5rem; color: rgba(255,255,255,0.92); letter-spacing: 0.5px; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .gk-hero-cta-group { display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; } .gk-btn-hero-primary { padding: 1rem 2.5rem; background: var(--color-accent-gold); color: #ffffff !important; border-radius: 50px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; box-shadow: 0 6px 20px rgba(182, 154, 100, 0.4); transition: all 0.3s ease; } .gk-btn-hero-primary:hover { transform: translateY(-3px); background: #a38853; box-shadow: 0 10px 25px rgba(182, 154, 100, 0.6); } .gk-btn-hero-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.25rem; background: rgba(255,255,255,0.12); color: #ffffff !important; border: 1px solid rgba(255,255,255,0.35); border-radius: 50px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; backdrop-filter: blur(8px); transition: all 0.3s ease; } .gk-btn-hero-secondary:hover { background: rgba(255,255,255,0.25); border-color: #ffffff; transform: translateY(-3px); } .gk-hero-scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: rgba(255,255,255,0.75); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; animation: gkBounce 2s infinite; } @keyframes gkBounce { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -6px); } 60% { transform: translate(-50%, -3px); } } /* 3. Section Headers & Universal Styling */ .gk-section-header { margin-bottom: 3rem; } .gk-section-subtitle { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 3px; color: var(--color-accent-gold); margin-bottom: 0.5rem; } /* 4. Refined USP Marquee Bar — Smooth Infinite Ribbon */ .gk-usp-bar, .gk-marquee-bar { position: relative !important; z-index: 5 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0.85rem 0 !important; background: #FAF9F6 !important; border-top: 1px solid #EAE8E3 !important; border-bottom: 1px solid #EAE8E3 !important; box-shadow: none !important; overflow: hidden !important; width: 100% !important; } html[data-theme="dark"] .gk-usp-bar, html[data-theme="dark"] .gk-marquee-bar { background: #131311 !important; border-top-color: #24221d !important; border-bottom-color: #24221d !important; } .gk-marquee-container { display: flex !important; width: 100% !important; overflow: hidden !important; user-select: none !important; -webkit-user-select: none !important; mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important; } .gk-marquee-track { display: flex !important; flex-shrink: 0 !important; align-items: center !important; justify-content: space-around !important; min-width: 100% !important; animation: gkUspMarqueeScroll 28s linear infinite !important; will-change: transform; } .gk-marquee-container:hover .gk-marquee-track { animation-play-state: paused !important; } @keyframes gkUspMarqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .gk-marquee-sep { color: var(--color-accent-gold, #C8A96E) !important; font-size: 1.1rem !important; opacity: 0.65 !important; padding: 0 1.25rem !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .gk-usp-item { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; padding: 0.25rem 0.85rem !important; border-radius: 0 !important; background: transparent !important; flex-shrink: 0 !important; white-space: nowrap !important; border-right: none !important; } .gk-usp-icon-wrap { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(182, 154, 100, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .gk-usp-icon-wrap svg { width: 16px !important; height: 16px !important; stroke: var(--color-accent-gold, #B69A64) !important; stroke-width: 2 !important; color: var(--color-accent-gold, #B69A64) !important; } .gk-usp-text { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; } .gk-usp-title { font-weight: 700 !important; font-size: 0.84rem !important; color: var(--color-text-dark, #1a1a1a) !important; letter-spacing: 0.2px !important; line-height: 1.2 !important; white-space: nowrap !important; } .gk-usp-sub { font-size: 0.74rem !important; color: var(--color-text-muted, #777777) !important; font-weight: 400 !important; line-height: 1.2 !important; margin-top: 1px !important; white-space: nowrap !important; } html[data-theme="dark"] .gk-usp-title { color: #F0EDE6 !important; } html[data-theme="dark"] .gk-usp-sub { color: #8E8A82 !important; } @media (max-width: 768px) { .gk-marquee-track { animation-duration: 20s !important; } } /* 5. Featured Categories Grid — 4-Column Desktop Alignment */ .gk-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .gk-cat-card { position: relative; display: block; text-decoration: none; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background-color: var(--color-bg-card, #1A1A1A); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease; isolation: isolate; } .gk-cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16); border-color: rgba(200, 169, 110, 0.4); } .gk-cat-img-wrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .gk-cat-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); display: block; } .gk-cat-card:hover .gk-cat-img { transform: scale(1.06); } .gk-cat-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #26231e 0%, #151412 100%); } .gk-cat-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(15, 15, 15, 0.35) 60%, rgba(15, 15, 15, 0.85) 88%, rgba(15, 15, 15, 0.96) 100% ); pointer-events: none; transition: background 0.35s ease; } .gk-cat-card:hover .gk-cat-overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(15, 15, 15, 0.45) 55%, rgba(15, 15, 15, 0.9) 85%, rgba(15, 15, 15, 0.98) 100% ); } .gk-cat-card-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 35%, rgba(15, 15, 15, 0.4) 60%, rgba(15, 15, 15, 0.88) 88%, rgba(15, 15, 15, 0.96) 100% ) !important; padding: 1.75rem 1.5rem !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; color: #ffffff !important; box-sizing: border-box !important; } .gk-cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; box-sizing: border-box; } .gk-cat-header-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 0.45rem; } .gk-cat-badge, .gk-cat-tag { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #C8A96E !important; margin: 0 !important; line-height: 1 !important; } .gk-cat-count-pill { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.65rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 3px 9px; border-radius: 12px; line-height: 1; letter-spacing: 0.3px; } .gk-cat-title, .gk-cat-card h3 { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: clamp(1.15rem, 1.35vw, 1.25rem) !important; font-weight: 600 !important; color: #ffffff !important; margin: 0 0 0.5rem !important; line-height: 1.25 !important; letter-spacing: 0.2px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important; } .gk-cat-explore, .gk-cat-count { font-family: var(--font-sans, 'Inter', sans-serif) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.78rem !important; font-weight: 600 !important; color: #C8A96E !important; text-transform: uppercase !important; letter-spacing: 1px !important; transition: gap 0.25s ease, color 0.25s ease !important; line-height: 1 !important; text-decoration: none !important; } .gk-cat-explore svg { stroke: #C8A96E; transition: transform 0.25s ease, stroke 0.25s ease; } .gk-cat-card:hover .gk-cat-explore, .gk-cat-card:hover .gk-cat-count { color: #dfc28b !important; gap: 9px !important; } .gk-cat-card:hover .gk-cat-explore svg { transform: translateX(4px); stroke: #dfc28b; } @media (max-width: 768px) { .gk-cat-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .gk-cat-card { height: auto !important; aspect-ratio: 3 / 4; } .gk-cat-content, .gk-cat-card-overlay { padding: 0.85rem 0.75rem !important; } .gk-cat-title, .gk-cat-card h3 { font-size: 1.1rem !important; margin-bottom: 0.35rem !important; } .gk-cat-header-meta { gap: 6px; margin-bottom: 0.3rem; } .gk-cat-badge, .gk-cat-tag { font-size: 0.62rem !important; letter-spacing: 1.2px !important; } .gk-cat-count-pill { font-size: 0.58rem; padding: 2px 6px; } .gk-cat-explore, .gk-cat-count { font-size: 0.7rem !important; } } /* 6. Elevated Product Cards */ .gk-card-new { position: relative; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .gk-card-new:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--color-accent-gold); } .gk-card-badge-wrap { position: absolute; top: 12px; left: 12px; z-index: 2; } .gk-badge-warranty { background: var(--color-accent-gold); color: #ffffff; font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 50px; } .gk-card-img-wrap { background: var(--color-bg-light); aspect-ratio: 4 / 4.5; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; } .gk-card-img-wrap img { max-height: 100%; object-fit: contain; transition: transform 0.5s ease; } .gk-card-new:hover .gk-card-img-wrap img { transform: scale(1.06); } .gk-card-placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-text-light); width: 100%; height: 100%; } .gk-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .gk-card-rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; } .gk-stars { color: var(--color-accent-gold); font-size: 0.85rem; letter-spacing: 1px; } .gk-rating-num { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); } .gk-card-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.75rem; } .gk-card-title a { color: var(--color-text-dark); } .gk-card-title a:hover { color: var(--color-accent-gold); } .gk-card-meta { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #64748b; margin-bottom: 0.45rem; } .gk-card-meta svg { color: #94a3b8; flex-shrink: 0; } .gk-card-price { font-size: 1.15rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 0.35rem; display: block; } .gk-card-new .gk-product-colors-wrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; margin: 0.35rem 0 0.85rem 0; min-height: 48px; width: 100%; } .gk-card-new .gk-colors-count { color: #475569; font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 6px; line-height: 1.2; } .gk-card-new .gk-colors-indicator-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); background: conic-gradient(#f44336 0deg 60deg, #ff9800 60deg 120deg, #ffeb3b 120deg 180deg, #4caf50 180deg 240deg, #2196f3 240deg 300deg, #9c27b0 300deg 360deg); flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .gk-card-new .gk-swatch-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; align-items: center; justify-content: flex-start; margin: 0; } .gk-card-body .gk-btn-pill { margin-top: auto; border-color: var(--color-border); } .gk-card-body .gk-btn-pill:hover { background: var(--color-accent-gold); border-color: var(--color-accent-gold); color: #fff; } /* 7. Room Visualizer Spotlight */ .gk-spotlight-card { background: linear-gradient(135deg, #1b1a17 0%, #292620 100%); border-radius: 16px; padding: 4rem 3rem; color: #ffffff; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid rgba(182, 154, 100, 0.3); } .gk-spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .gk-spotlight-tag { color: var(--color-accent-gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 0.75rem; } .gk-spotlight-text h2 { font-size: 2.8rem; color: #ffffff; margin-bottom: 1rem; line-height: 1.2; } .gk-spotlight-text p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 1.75rem; line-height: 1.6; } .gk-spotlight-features { list-style: none; margin-bottom: 2rem; } .gk-spotlight-features li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: rgba(255,255,255,0.9); font-size: 0.95rem; } .gk-spotlight-features svg { stroke: var(--color-accent-gold); } .gk-btn-glow { box-shadow: 0 0 25px rgba(182, 154, 100, 0.4); } .gk-spotlight-mockup { position: relative; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 3rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; } .gk-mockup-frame { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .gk-mockup-badge { background: var(--color-accent-gold); color: #ffffff; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; padding: 4px 12px; border-radius: 50px; text-transform: uppercase; } .gk-spotlight-icon { width: 90px; height: 90px; stroke: rgba(255,255,255,0.7); } .gk-mockup-footer span { font-size: 0.85rem; color: rgba(255,255,255,0.6); letter-spacing: 1px; text-transform: uppercase; } /* 8. Bespoke Custom Section — Handled by Primary Bespoke Styles */ /* Trustindex Google Reviews - Dark Mode Overrides */ html[data-theme="dark"] .gk-testimonials-section { background-color: var(--color-bg-light, #171613) !important; color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-testimonials-section .section-title { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .ti-widget.ti-goog, html[data-theme="dark"] .ti-widget.ti-goog .ti-widget-container, html[data-theme="dark"] .ti-widget.ti-goog .ti-footer, html[data-theme="dark"] .ti-widget.ti-goog .ti-rating-text, html[data-theme="dark"] .ti-widget.ti-goog .ti-rating-text *, html[data-theme="dark"] .ti-widget.ti-goog .ti-footer * { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-rating-text strong { color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-review-item > .ti-inner { background-color: var(--color-bg-card, #232019) !important; border: 1px solid var(--color-border, #3A362D) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-name, html[data-theme="dark"] .ti-widget.ti-goog .ti-name a, html[data-theme="dark"] .ti-widget.ti-goog .ti-review-content, html[data-theme="dark"] .ti-widget.ti-goog .ti-review-content * { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-date { color: var(--color-text-muted, #C9C4B8) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-read-more span { color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-controls .ti-next, html[data-theme="dark"] .ti-widget.ti-goog .ti-controls .ti-prev, html[data-theme="dark"] .ti-next, html[data-theme="dark"] .ti-prev { background-color: var(--color-bg-card, #232019) !important; border: 1px solid var(--color-border, #3A362D) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .ti-widget.ti-goog .ti-controls .ti-next:after, html[data-theme="dark"] .ti-widget.ti-goog .ti-controls .ti-prev:after, html[data-theme="dark"] .ti-next:after, html[data-theme="dark"] .ti-prev:after { border-color: var(--color-text-dark, #F1EEE7) !important; } /* 9. Craftsmanship Stats Cards */ .gk-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .gk-stat-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent-gold); border-radius: 12px; padding: 3rem 2rem; text-align: center; transition: transform 0.3s ease; } .gk-stat-card:hover { transform: translateY(-4px); } .gk-stat-number { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 600; color: var(--color-accent-gold); display: block; line-height: 1; margin-bottom: 0.75rem; } .gk-stat-label { font-size: 1.1rem; font-weight: 600; color: var(--color-text-dark); display: block; margin-bottom: 0.25rem; } .gk-stat-desc { font-size: 0.85rem; color: var(--color-text-muted); } /* 10. Certified Trust Badges */ .gk-trust-badges-wrapper { text-align: center; padding: 3rem 0; border-top: 1px solid var(--color-border); } /* 11. Testimonials Grid */ .gk-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .gk-testimonial-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; } .gk-testimonial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .gk-testimonial-stars { color: var(--color-accent-gold); font-size: 0.9rem; } .gk-verified-badge { font-size: 0.7rem; font-weight: 600; color: #27ae60; background: rgba(39, 174, 96, 0.1); padding: 3px 8px; border-radius: 50px; display: flex; align-items: center; gap: 4px; } .gk-testimonial-quote { font-style: italic; color: var(--color-text-dark); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; } .gk-testimonial-author { display: flex; align-items: center; gap: 1rem; } .gk-author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-accent-gold); color: #ffffff; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .gk-author-info { display: flex; flex-direction: column; } .gk-testimonial-name { font-weight: 600; font-size: 0.95rem; color: var(--color-text-dark); } .gk-testimonial-location { font-size: 0.8rem; color: var(--color-text-muted); } /* 12. Footer Newsletter & Payment Icons */ .gk-footer-subtext { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 1rem; } .gk-footer-newsletter { display: flex; gap: 0.5rem; } .gk-footer-newsletter input { padding: 0.75rem 1rem; border-radius: 50px; background: #242424 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; flex-grow: 1; font-size: 0.85rem; } .gk-footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.55) !important; } .gk-newsletter-btn { padding: 0.75rem 1.25rem; background: var(--color-accent-gold, #C8A96E) !important; color: #141414 !important; border: none; border-radius: 50px; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: background 0.3s ease; } .gk-newsletter-btn:hover { background: #dfc28b !important; } .gk-footer-payment-trust { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; text-align: center; } .gk-payment-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, 0.9) !important; display: block; margin-bottom: 1rem; } .gk-payment-icons { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .gk-pay-pill { font-size: 0.75rem; font-weight: 600; color: #ffffff !important; background: #222222 !important; padding: 0.4rem 1rem; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .gk-footer-policies { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .gk-footer-policies ul { list-style: none; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .gk-footer-policies a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8) !important; text-decoration: none; transition: color 0.2s ease; } .gk-footer-policies a:hover { color: var(--color-accent-gold, #C8A96E) !important; } /* 13. Mobile Bottom Navigation Glassmorphism */ @media (max-width: 768px) { .gk-hero-content h1 { font-size: 2.2rem; letter-spacing: 1px; line-height: 1.25; } .gk-hero-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; } .gk-usp-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .gk-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .gk-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .gk-spotlight-grid, .gk-bespoke-grid, .gk-stats-grid, .gk-testimonials-grid { grid-template-columns: 1fr; gap: 2rem; } .gk-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(248, 247, 244, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--color-border); padding: 0.6rem 1rem; justify-content: space-around; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); } html[data-theme="dark"] .gk-mobile-nav { background: rgba(23, 22, 19, 0.94); } .gk-mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.7rem; color: var(--color-text-muted); } .gk-mobile-nav-item.is-active, .gk-mobile-nav-item:hover { color: var(--color-accent-gold); } } .gk-page-warranty .gk-hero-subtitle { color: var(--color-text-muted) !important; text-shadow: none !important; } /* ========================================== PREMIUM GLASSMORPHISM HEADER (HOMEPAGE) ========================================== */ body.home .gk-announcement-bar { display: none !important; } body.home .gk-header { position: fixed !important; width: 100% !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: #FFFFFF !important; background-color: #FFFFFF !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; border-bottom: 1px solid #f0f0f0 !important; padding: 0.8rem 2.5rem !important; transition: all 0.3s ease !important; transform: none !important; } body.home .gk-header .gk-logo img { filter: none !important; transition: filter 0.3s ease; } body.home .gk-header .gk-nav a { color: #1a1a1a !important; font-weight: 600 !important; letter-spacing: 1.2px !important; transition: color 0.3s ease; } body.home .gk-header .gk-nav a:hover { color: #c89a3f !important; } body.home .gk-header .gk-header-icons svg { color: #1a1a1a !important; stroke: #1a1a1a !important; transition: stroke 0.3s ease; } body.home .gk-header.gk-header--scrolled { background-color: #FFFFFF !important; background: #FFFFFF !important; padding: 0.8rem 2.5rem !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid #e8e8e8 !important; } body.home .gk-header.gk-header--scrolled .gk-logo img { filter: none !important; } body.home .gk-header.gk-header--scrolled .gk-nav a { color: #1a1a1a !important; } body.home .gk-header.gk-header--scrolled .gk-header-icons svg { color: #1a1a1a !important; stroke: #1a1a1a !important; } html[data-theme="dark"] body.home .gk-header { background-color: #171613 !important; background: #171613 !important; border-bottom-color: #2a2824 !important; } html[data-theme="dark"] body.home .gk-header .gk-nav a, html[data-theme="dark"] body.home .gk-header .gk-header-icons svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } /* ========================================== PREMIUM SPACING & LUXURY BREATHING ROOM ========================================== */ .gk-featured-cats, .gk-heritage-section, .gk-social-section { padding: 2rem 0 !important; } @media (max-width: 768px) { .gk-featured-cats, .gk-heritage-section, .gk-social-section, .gk-bespoke-section { padding: 3.5rem 1rem !important; } body.home .gk-header { padding: 0.75rem 1rem !important; } body.home .gk-header.gk-header--scrolled { padding: 0.75rem 1rem !important; } body.home .gk-header .gk-hamburger svg, .gk-header .gk-hamburger svg { stroke: #1a1a1a !important; } .gk-logo img { max-height: 35px !important; } } /* ========================================== PREMIUM PRODUCT CARD HOVER ========================================== */ .gk-product-card { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(0,0,0,0.03); } .gk-product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .gk-product-card-image { overflow: hidden; } .gk-product-card-image img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .gk-product-card:hover .gk-product-card-image img { transform: scale(1.08); } /* ========================================== PREMIUM MOBILE RESPONSIVENESS FIXES ========================================== */ @media (max-width: 768px) { /* Scale down massive hero text so it does not break lines awkwardly */ .gk-hero-content h1 { font-size: 2.2rem !important; letter-spacing: 1px !important; line-height: 1.2 !important; } /* Reduce premium breathing room so mobile does not require excessive scrolling */ .gk-featured-cats, .gk-heritage-section, .gk-social-section, .gk-bespoke-section { padding: 3rem 1rem !important; } /* Make header compact on mobile to save vertical space */ body.home .gk-header { padding: 1rem 1.5rem !important; } body.home .gk-header.gk-header--scrolled { padding: 0.8rem 1.5rem !important; } /* Hamburger menu is dark on white navbar in light mode, light in dark mode */ body.home .gk-header:not(.gk-header--scrolled) .gk-hamburger span, body.home .gk-header:not(.gk-header--scrolled) .gk-hamburger-line { background-color: #1a1a1a !important; } html[data-theme="dark"] body.home .gk-header:not(.gk-header--scrolled) .gk-hamburger span, html[data-theme="dark"] body.home .gk-header:not(.gk-header--scrolled) .gk-hamburger-line { background-color: var(--color-text-dark, #F1EEE7) !important; } /* Shrink hero subtitle */ .gk-hero-subtitle { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; } /* Ensure logo is properly scaled in glass header */ .gk-logo img { max-height: 35px !important; } } /* ========================================== ULTRA-PREMIUM GLOBAL TOUCHES ========================================== */ /* Elegant Text Selection */ ::selection { background: var(--color-accent-gold); color: #FFFFFF; } ::-moz-selection { background: var(--color-accent-gold); color: #FFFFFF; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Unified Premium Button Transitions */ .gk-btn, .gk-btn-cart, .gk-btn-hero, .gk-btn-hero-primary, .gk-btn-hero-secondary, .gk-btn-pill, .gk-btn-outline, .woocommerce button.button.alt, button[type="submit"] { transition: all 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) !important; } /* Refined Focus States for Accessibility without visual clutter */ :focus-visible { outline: 1px solid var(--color-accent-gold); outline-offset: 3px; } /* ========================================== THEME COLOR INJECTIONS (WooCommerce & Astra) ========================================== */ /* WooCommerce Price Slider */ .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--color-accent-gold) !important; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { border: 2px solid #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; } .woocommerce .widget_price_filter .price_slider_amount .button { background-color: var(--color-accent-gold) !important; color: #fff !important; border-radius: 4px !important; padding: 0.4rem 1rem !important; } .woocommerce .widget_price_filter .price_slider_amount .button:hover { background-color: #111 !important; } /* Astra Scroll to Top Button */ #ast-scroll-top { background-color: var(--color-accent-gold) !important; color: #fff !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(200, 169, 110, 0.4) !important; } body.home .gk-header.gk-header--scrolled { background-color: #FFFFFF !important; background: #FFFFFF !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid #e8e8e8 !important; } body.home .gk-header.gk-header--scrolled .gk-logo img { filter: none !important; } body.home .gk-header.gk-header--scrolled .gk-nav a, body.home .gk-header.gk-header--scrolled .gk-header-icons svg { color: #1a1a1a !important; stroke: #1a1a1a !important; } html[data-theme="dark"] body.home .gk-header.gk-header--scrolled { background-color: rgba(23, 22, 19, 0.95) !important; } html[data-theme="dark"] body.home .gk-header.gk-header--scrolled .gk-logo img { filter: brightness(0) invert(1); } html[data-theme="dark"] body.home .gk-header.gk-header--scrolled .gk-nav a, html[data-theme="dark"] body.home .gk-header.gk-header--scrolled .gk-header-icons svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } /* ========================================== PREMIUM SPACING & LUXURY BREATHING ROOM ========================================== */ .gk-featured-cats, .gk-heritage-section, .gk-social-section { padding: 2rem 0 !important; } @media (max-width: 768px) { .gk-featured-cats, .gk-heritage-section, .gk-social-section, .gk-bespoke-section { padding: 3.5rem 1rem !important; } body.home .gk-header { padding: 0.75rem 1rem !important; } body.home .gk-header.gk-header--scrolled { padding: 0.75rem 1rem !important; } body.home .gk-header .gk-hamburger svg, .gk-header .gk-hamburger svg { stroke: #1a1a1a !important; } .gk-logo img { max-height: 35px !important; } } /* ========================================== PREMIUM PRODUCT CARD HOVER ========================================== */ .gk-product-card { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(0,0,0,0.03); } .gk-product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .gk-product-card-image { overflow: hidden; } .gk-product-card-image img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .gk-product-card:hover .gk-product-card-image img { transform: scale(1.08); } /* ========================================== PREMIUM MOBILE RESPONSIVENESS FIXES ========================================== */ @media (max-width: 768px) { /* Scale down massive hero text so it does not break lines awkwardly */ .gk-hero-content h1 { font-size: 2.2rem !important; letter-spacing: 1px !important; line-height: 1.2 !important; } /* Reduce premium breathing room so mobile does not require excessive scrolling */ .gk-featured-cats, .gk-heritage-section, .gk-social-section, .gk-bespoke-section { padding: 3rem 1rem !important; } /* Make header compact on mobile to save vertical space */ body.home .gk-header { padding: 0.75rem 1rem !important; } body.home .gk-header.gk-header--scrolled { padding: 0.75rem 1rem !important; } /* Hamburger menu is dark on white navbar */ body.home .gk-header .gk-hamburger span, .gk-header .gk-hamburger span { background-color: #1a1a1a !important; } /* Shrink hero subtitle */ .gk-hero-subtitle { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; } /* Ensure logo is properly scaled in glass header */ .gk-logo img { max-height: 35px !important; } } /* ========================================== ULTRA-PREMIUM GLOBAL TOUCHES ========================================== */ /* Elegant Text Selection */ ::selection { background: var(--color-accent-gold); color: #FFFFFF; } ::-moz-selection { background: var(--color-accent-gold); color: #FFFFFF; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Unified Premium Button Transitions */ .gk-btn, .gk-btn-cart, .gk-btn-hero, .gk-btn-hero-primary, .gk-btn-hero-secondary, .gk-btn-pill, .gk-btn-outline, .woocommerce button.button.alt, button[type="submit"] { transition: all 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) !important; } /* Refined Focus States for Accessibility without visual clutter */ :focus-visible { outline: 1px solid var(--color-accent-gold); outline-offset: 3px; } /* ========================================== THEME COLOR INJECTIONS (WooCommerce & Astra) ========================================== */ /* WooCommerce Price Slider */ .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--color-accent-gold) !important; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { border: 2px solid #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; } .woocommerce .widget_price_filter .price_slider_amount .button { background-color: var(--color-accent-gold) !important; color: #fff !important; border-radius: 4px !important; padding: 0.4rem 1rem !important; } .woocommerce .widget_price_filter .price_slider_amount .button:hover { background-color: #111 !important; } /* Astra Scroll to Top Button */ #ast-scroll-top { background-color: var(--color-accent-gold) !important; color: #fff !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(200, 169, 110, 0.4) !important; } #ast-scroll-top:hover { background-color: #111 !important; transform: translateY(-3px) !important; } /* Footer Logo Refinement */ .gk-footer-brand .custom-logo { max-height: 70px !important; width: auto !important; object-fit: contain; margin-bottom: 1.5rem; } /* Shop Hero Slider */ .gk-shop-slider-hero { position: relative; overflow: hidden; background: #111; padding: 14rem 2rem 12rem !important; text-align: center; margin-bottom: 4rem; } .gk-shop-slider-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } @media (max-width: 768px) { .gk-shop-slider-hero { padding: 8rem 1rem 6rem !important; } } .gk-shop-slider-bg .gk-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; animation: gkShopFade 20s infinite; } .gk-shop-slider-bg .gk-slide:nth-child(1) { animation-delay: 0s; } .gk-shop-slider-bg .gk-slide:nth-child(2) { animation-delay: 5s; } .gk-shop-slider-bg .gk-slide:nth-child(3) { animation-delay: 10s; } .gk-shop-slider-bg .gk-slide:nth-child(4) { animation-delay: 15s; } @keyframes gkShopFade { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 1; } 25% { opacity: 1; } 35% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } } .gk-shop-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(31,31,31,0.7), rgba(31,31,31,0.85)); z-index: 1; } .gk-shop-hero-content { position: relative; z-index: 2; } /* Filter Toggle Buttons */ .gk-mobile-filter-toggle { display: none; width: 100%; padding: 1rem; background: var(--color-bg-card); border: 1px solid var(--color-border); color: var(--color-text-dark); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; border-radius: 8px; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; } .gk-filter-actions { display: flex; align-items: center; gap: 1rem; } .gk-mobile-filter-close { display: none; background: none; border: none; color: var(--color-text-dark); cursor: pointer; padding: 0; } @media (max-width: 991px) { .gk-mobile-filter-toggle { display: flex; } .gk-mobile-filter-close { display: block; } .gk-shop-filters.is-open { box-shadow: 0 -10px 40px rgba(0,0,0,0.15); border-radius: 20px 20px 0 0; padding-top: 2rem; } } /* WooCommerce Price Slider Base Fixes */ .widget_price_filter .price_slider { margin-bottom: 1.5rem; } .widget_price_filter .ui-slider { position: relative; text-align: left; margin-left: 0.5em; margin-right: 0.5em; height: 0.5em; background-color: var(--color-border); border-radius: 1em; } .widget_price_filter .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; background-color: var(--color-accent-gold) !important; border-radius: 50%; cursor: ew-resize; outline: none; top: -0.35em; margin-left: -0.6em; border: 2px solid #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; } .widget_price_filter .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; border-radius: 1em; background-color: var(--color-accent-gold) !important; top: 0; height: 100%; } .widget_price_filter .price_slider_amount { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; flex-wrap: nowrap; margin-top: 1.5rem; } .widget_price_filter .price_slider_amount .clear { display: none !important; } .widget_price_filter .price_label { font-size: 0.9rem; color: var(--color-text-light); white-space: nowrap; } .widget_price_filter .price_slider_amount .button { font-size: 0.8rem; padding: 0.4rem 1rem; border-radius: 20px; white-space: nowrap; margin-left: 10px; } .widget_price_filter .price_slider_amount .button { font-size: 0.8rem; padding: 0.4rem 1rem; border-radius: 20px; } .widget_price_filter .price_label { font-size: 0.9rem; color: var(--color-text-light); } /* ========================================== ENHANCEMENTS & OVERRIDES ========================================== */ /* Trust Badges Marquee Wrapper */ .gk-trust-badges-wrapper { text-align: center; padding: 2.5rem 0 3rem; width: 100%; } /* Shop Page Styling */ .gk-shop-page { background-color: #f8f9fa; min-height: 100vh; } .gk-product-card { border-radius: 8px !important; overflow: hidden !important; background: #ffffff !important; } /* Stronger Product Card Overrides */ body.woocommerce ul.products li.product.gk-product-card, ul.products li.gk-product-card { background-color: #ffffff !important; border-radius: 8px !important; overflow: hidden !important; padding: 0 !important; } /* ========================================================================== PRODUCT CARD IMAGE HOVER SWITCH (PRIMARY & SECONDARY GALLERY IMAGE) ========================================================================== */ .gk-product-card-image { position: relative !important; aspect-ratio: 3 / 4 !important; width: 100% !important; overflow: hidden !important; background: #ffffff !important; display: block !important; padding: 0 !important; margin: 0 !important; } /* Base image styling: centered, contain, clean white background */ body.woocommerce ul.products li.product.gk-product-card .gk-product-card-image img, .gk-product-card-image img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; background-color: #ffffff !important; padding: 0.65rem !important; box-sizing: border-box !important; margin: 0 !important; display: block !important; } /* Primary Image: Base layer, always visible by default */ .gk-product-card-image img.gk-primary-img, .gk-product-card-image img:first-of-type { position: relative !important; top: 0 !important; left: 0 !important; opacity: 1 !important; z-index: 1 !important; transition: opacity 0.22s ease-in-out, transform 0.25s ease-out !important; } /* Secondary Image: Absolute overlay on top, hidden by default */ .gk-product-card-image img.gk-secondary-img { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; background-color: #ffffff !important; padding: 0.65rem !important; box-sizing: border-box !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 3 !important; transition: opacity 0.22s ease-in-out, visibility 0.22s ease-in-out, transform 0.25s ease-out !important; } /* Hover & Active Door Open Switch: Smooth crossfade to secondary image */ @media (hover: hover) and (pointer: fine) { .gk-product-card:hover .gk-product-card-image img.gk-secondary-img, .gk-product-card-image:hover img.gk-secondary-img, .gk-card-new:hover .gk-card-img-wrap img.gk-secondary-img, .gk-card-img-wrap:hover img.gk-secondary-img { opacity: 1 !important; visibility: visible !important; transform: scale(1.04) !important; } .gk-product-card:hover .gk-product-card-image:has(img.gk-secondary-img) img.gk-primary-img, .gk-product-card-image:hover:has(img.gk-secondary-img) img.gk-primary-img, .gk-card-new:hover .gk-card-img-wrap:has(img.gk-secondary-img) img.gk-primary-img, .gk-card-img-wrap:hover:has(img.gk-secondary-img) img.gk-primary-img { opacity: 0 !important; transform: scale(1.04) !important; } .gk-product-card:hover .gk-product-card-image img.gk-primary-img, .gk-card-new:hover .gk-card-img-wrap img.gk-primary-img { transform: scale(1.04) !important; } } /* Active Door Open Switch (Controlled state for Mobile Touch Tap & Toggle) */ .gk-product-card.is-door-open .gk-product-card-image img.gk-secondary-img, .gk-product-card-image.is-door-open img.gk-secondary-img, .gk-card-new.is-door-open .gk-card-img-wrap img.gk-secondary-img, .gk-card-img-wrap.is-door-open img.gk-secondary-img { opacity: 1 !important; visibility: visible !important; transform: scale(1.04) !important; } .gk-product-card.is-door-open .gk-product-card-image:has(img.gk-secondary-img) img.gk-primary-img, .gk-product-card-image.is-door-open:has(img.gk-secondary-img) img.gk-primary-img, .gk-card-new.is-door-open .gk-card-img-wrap:has(img.gk-secondary-img) img.gk-primary-img, .gk-card-img-wrap.is-door-open:has(img.gk-secondary-img) img.gk-primary-img { opacity: 0 !important; transform: scale(1.04) !important; } .gk-product-card.is-door-open .gk-product-card-image img.gk-primary-img, .gk-card-new.is-door-open .gk-card-img-wrap img.gk-primary-img { transform: scale(1.04) !important; } /* Badges and Wishlist on top of both images */ .gk-product-card-image .gk-badge { position: absolute !important; top: 1rem !important; left: 1rem !important; z-index: 5 !important; } .gk-product-card .gk-wishlist-btn, .gk-product-card-image .gk-wishlist-btn, .gk-card-img-wrap .gk-wishlist-btn, .gk-card-new .gk-wishlist-btn { position: absolute !important; top: 1rem !important; right: 1rem !important; z-index: 10 !important; } /* "View Inside" Peek Badge on Wardrobe Cards */ .gk-peek-badge { position: absolute !important; bottom: 0.75rem !important; left: 50% !important; transform: translateX(-50%) !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 12px !important; background: rgba(28, 26, 22, 0.88) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(200, 169, 110, 0.55) !important; border-radius: 20px !important; color: #C8A96E !important; font-family: var(--font-sans, 'Montserrat', sans-serif) !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; white-space: nowrap !important; z-index: 15 !important; pointer-events: auto !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .gk-peek-badge:active { transform: translateX(-50%) scale(0.95) !important; } .gk-peek-badge svg { stroke: #C8A96E !important; flex-shrink: 0 !important; } .gk-peek-badge .gk-peek-text-open { display: none !important; } @media (hover: hover) and (pointer: fine) { .gk-product-card:hover .gk-peek-badge, .gk-card-new:hover .gk-peek-badge { background: #C8A96E !important; color: #12110F !important; border-color: #C8A96E !important; } .gk-product-card:hover .gk-peek-badge svg, .gk-card-new:hover .gk-peek-badge svg { stroke: #12110F !important; } .gk-product-card:hover .gk-peek-badge .gk-peek-text-default, .gk-card-new:hover .gk-peek-badge .gk-peek-text-default { display: none !important; } .gk-product-card:hover .gk-peek-badge .gk-peek-text-open, .gk-card-new:hover .gk-peek-badge .gk-peek-text-open { display: inline !important; } } .gk-product-card.is-door-open .gk-peek-badge, .gk-product-card-image.is-door-open .gk-peek-badge, .gk-card-new.is-door-open .gk-peek-badge, .gk-card-img-wrap.is-door-open .gk-peek-badge { background: #C8A96E !important; color: #12110F !important; border-color: #C8A96E !important; } .gk-product-card.is-door-open .gk-peek-badge svg, .gk-product-card-image.is-door-open .gk-peek-badge svg, .gk-card-new.is-door-open .gk-peek-badge svg, .gk-card-img-wrap.is-door-open .gk-peek-badge svg { stroke: #12110F !important; } .gk-product-card.is-door-open .gk-peek-badge .gk-peek-text-default, .gk-product-card-image.is-door-open .gk-peek-badge .gk-peek-text-default, .gk-card-new.is-door-open .gk-peek-badge .gk-peek-text-default, .gk-card-img-wrap.is-door-open .gk-peek-badge .gk-peek-text-default { display: none !important; } .gk-product-card.is-door-open .gk-peek-badge .gk-peek-text-open, .gk-product-card-image.is-door-open .gk-peek-badge .gk-peek-text-open, .gk-card-new.is-door-open .gk-peek-badge .gk-peek-text-open, .gk-card-img-wrap.is-door-open .gk-peek-badge .gk-peek-text-open { display: inline !important; } @media (max-width: 768px), (pointer: coarse) { .gk-peek-badge { bottom: 0.65rem !important; padding: 6px 14px !important; font-size: 0.68rem !important; min-height: 28px !important; touch-action: manipulation !important; } } /* Pincode Delivery & Assembly Checker */ .gk-pincode-checker { margin: 1.25rem 0 1rem; padding: 1rem 1.25rem; background: #FAF9F6; border: 1px solid #EAE6DF; border-radius: 12px; } [data-theme="dark"] .gk-pincode-checker { background: #1C1A17; border-color: #33302A; } .gk-pincode-header { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--color-ink, #1B1B1B); margin-bottom: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; } [data-theme="dark"] .gk-pincode-header { color: #F8F7F4; } .gk-pincode-header svg { stroke: var(--color-accent-gold, #C8A96E); } .gk-pincode-input-wrap { display: flex; gap: 8px; } .gk-pincode-input-wrap input { flex: 1; height: 42px; padding: 0 14px; border: 1px solid #D8D4CC; border-radius: 8px; font-size: 0.9rem; background: #FFF; color: #1B1B1B; outline: none; transition: border-color 0.2s; } [data-theme="dark"] .gk-pincode-input-wrap input { background: #12110F; border-color: #444; color: #FFF; } .gk-pincode-input-wrap input:focus { border-color: var(--color-accent-gold, #C8A96E); } .gk-btn-pincode { height: 42px; padding: 0 18px; background: var(--color-ink, #1B1B1B); color: #FFF; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border: none; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; } .gk-btn-pincode:hover { background: var(--color-accent-gold, #C8A96E); color: #12110F; } .gk-pincode-result { margin-top: 0.65rem; padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; font-weight: 500; } .gk-pincode-result.is-kannauj-up { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; } .gk-pincode-result.is-pan-india { background: #E3F2FD; color: #0D47A1; border: 1px solid #BBDEFB; } .gk-pincode-result.is-invalid { background: #FFEBEE; color: #B71C1C; border: 1px solid #FFCDD2; } /* Enhanced 4-Item Product Trust Bar */ .gk-product-trust-bar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px 14px !important; padding: 1.15rem 1.25rem !important; background: #FAF9F6 !important; border: 1px solid #EAE6DF !important; border-radius: 12px !important; margin: 1.25rem 0 !important; } [data-theme="dark"] .gk-product-trust-bar { background: #1C1A17 !important; border-color: #33302A !important; } .gk-trust-item { display: flex !important; align-items: center !important; gap: 9px !important; font-size: 0.8rem !important; font-weight: 600 !important; color: var(--color-ink, #1B1B1B) !important; } [data-theme="dark"] .gk-trust-item { color: #E0DED9 !important; } .gk-trust-item svg { width: 20px !important; height: 20px !important; stroke: var(--color-accent-gold, #C8A96E) !important; flex-shrink: 0 !important; } @media (min-width: 768px) { .gk-product-trust-bar { grid-template-columns: repeat(4, 1fr) !important; } } /* Homepage Best Sellers card image structure */ .gk-card-img-wrap { position: relative !important; overflow: hidden !important; display: block !important; background: #ffffff !important; } .gk-card-img-wrap img.gk-primary-img { position: relative !important; width: 100% !important; height: 100% !important; object-fit: contain !important; opacity: 1 !important; z-index: 1 !important; transition: opacity 0.4s ease, transform 0.45s ease !important; } .gk-card-img-wrap img.gk-secondary-img { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 2 !important; transition: opacity 0.22s ease-in-out, visibility 0.22s ease-in-out, transform 0.25s ease-out !important; } /* Mobile Product Grid: 2 Columns */ @media (max-width: 576px) { body.woocommerce ul.products, body.woocommerce-page ul.products, ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; width: 100% !important; padding: 0 1rem !important; box-sizing: border-box !important; } .gk-product-card { width: 100% !important; margin: 0 !important; } } @media (min-width: 577px) and (max-width: 768px) { body.woocommerce ul.products, body.woocommerce-page ul.products, ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; padding: 0 1rem !important; } } /* Mobile Category Grid: Enforce 2x2 Layout */ @media (max-width: 768px) { .gk-cat-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } @media (max-width: 480px) { .gk-cat-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* ────────────────────────────────────── * Shop Catalogue Header & Sort Controls * ────────────────────────────────────── */ /* Desktop Header Bar (Default >= 992px) */ .gk-shop-header-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1.5rem 0; padding: 0.5rem 0; border-bottom: 1px solid #eef0f3; } .gk-shop-header-bar .gk-products-found { font-size: 1.15rem; font-weight: 600; color: #1e293b; margin: 0; padding: 0; } .gk-desktop-sort-wrap { display: flex; align-items: center; gap: 8px; } .gk-sort-prefix { font-size: 0.9rem; font-weight: 500; color: #64748b; white-space: nowrap; } .gk-desktop-sort-wrap form.woocommerce-ordering { margin: 0 !important; } .gk-desktop-sort-wrap select.orderby { background-color: #ffffff; border: 1.5px solid #d1d5db; border-radius: 8px; padding: 7px 34px 7px 12px; font-size: 0.88rem; font-weight: 500; color: #1f2937; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234b5563%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .gk-desktop-sort-wrap select.orderby:hover, .gk-desktop-sort-wrap select.orderby:focus { border-color: var(--color-accent-gold, #B69A64); box-shadow: 0 0 0 3px rgba(182, 154, 100, 0.15); outline: none; } /*/* Mobile Catalogue Bar (Hidden by default on Desktop) */ .gk-mobile-catalogue-bar { display: none; } @media (max-width: 991px) { .gk-shop-page { padding-top: 0 !important; } .gk-shop-page .gk-container { padding-left: 1rem !important; padding-right: 1rem !important; } .gk-shop-layout { display: block !important; margin: 0.25rem 0 1.5rem 0 !important; gap: 0 !important; padding: 0 !important; } .gk-shop-filters { display: none !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; height: 75vh !important; z-index: 99999 !important; background: var(--color-bg-light, #ffffff) !important; border-radius: 20px 20px 0 0 !important; box-shadow: 0 -10px 40px rgba(0,0,0,0.25) !important; overflow-y: auto !important; padding: 1.5rem !important; margin: 0 !important; } .gk-shop-filters.is-open { display: block !important; } .gk-shop-content { padding-top: 0 !important; margin-top: 0 !important; width: 100% !important; } .gk-shop-header-bar { margin-bottom: 0.4rem !important; border-bottom: none !important; padding: 0 !important; } .gk-products-found-wrap { margin: 0 !important; } .gk-products-found { font-size: 0.95rem !important; font-weight: 700 !important; color: #111827 !important; margin: 0 0 0.35rem 0 !important; letter-spacing: -0.1px !important; } html[data-theme="dark"] .gk-products-found, body.dark-mode .gk-products-found { color: #F1EEE7 !important; } .gk-desktop-sort-wrap { display: none !important; } .gk-mobile-catalogue-bar { display: flex !important; gap: 10px !important; margin: 0.5rem 0 0.5rem 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; } .gk-mobile-sort-wrap { flex: 1; position: relative; } .gk-mobile-sort-btn { width: 100%; height: 44px; background: #F4F5F7 !important; color: #111827 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.94rem !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 12px !important; pointer-events: none; text-transform: none !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; } .gk-mobile-sort-btn svg { stroke: #111827 !important; flex-shrink: 0 !important; } .gk-mobile-sort-wrap form.woocommerce-ordering { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; opacity: 0; z-index: 10; cursor: pointer; } .gk-mobile-sort-wrap select.orderby { width: 100%; height: 100%; font-size: 16px; /* Prevents iOS auto-zoom */ cursor: pointer; opacity: 0; } .gk-mobile-filter-toggle { flex: 1; height: 44px; background: #F4F5F7 !important; color: #111827 !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.94rem !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; text-transform: none !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; } .gk-mobile-filter-toggle svg { fill: #111827 !important; color: #111827 !important; flex-shrink: 0 !important; } .gk-mobile-filter-toggle:active { background: #E5E7EB !important; transform: scale(0.98); } /* Dark Mode support */ html[data-theme="dark"] .gk-mobile-sort-btn, html[data-theme="dark"] .gk-mobile-filter-toggle, body.dark-mode .gk-mobile-sort-btn, body.dark-mode .gk-mobile-filter-toggle { background: #232019 !important; color: #F1EEE7 !important; border-color: #3A362D !important; } html[data-theme="dark"] .gk-mobile-sort-btn svg, body.dark-mode .gk-mobile-sort-btn svg { stroke: #F1EEE7 !important; } html[data-theme="dark"] .gk-mobile-filter-toggle svg, body.dark-mode .gk-mobile-filter-toggle svg { fill: #F1EEE7 !important; color: #F1EEE7 !important; } } /* Mobile Sidebar Menu Z-Index */ .gk-mobile-menu { z-index: 9999999 !important; } /* Product Gallery on Mobile */ @media (max-width: 768px) { .gk-product-gallery-main { height: auto !important; max-height: none !important; overflow: visible !important; } .gk-product-gallery-main img.gk-main-image { width: 100% !important; height: auto !important; object-fit: contain !important; max-height: 500px; } } /* Scroll To Top Positioning */ @media (max-width: 768px) { #ast-scroll-top { bottom: 95px !important; right: 15px !important; z-index: 9990 !important; } } /* Slider Arrow Navigation Buttons */ .gk-hero-new .gk-slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 99 !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 50% !important; cursor: pointer !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; transition: all 0.3s ease !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; line-height: 1 !important; font-size: 0 !important; overflow: visible !important; } .gk-hero-new .gk-slider-prev { left: 18px !important; right: auto !important; } .gk-hero-new .gk-slider-next { right: 18px !important; left: auto !important; } .gk-hero-new .gk-slider-arrow:hover { background: rgba(0, 0, 0, 0.65) !important; border-color: #ffffff !important; transform: translateY(-50%) scale(1.1) !important; } .gk-hero-new .gk-slider-arrow svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; stroke: #ffffff !important; color: #ffffff !important; fill: none !important; flex-shrink: 0 !important; pointer-events: none !important; } .gk-hero-new .gk-slider-arrow polyline, .gk-hero-new .gk-slider-arrow path { stroke: #ffffff !important; fill: none !important; stroke-width: 2.5 !important; } @media (max-width: 768px) { .gk-hero-new .gk-slider-arrow { width: 36px !important; height: 36px !important; } .gk-hero-new .gk-slider-prev { left: 8px !important; } .gk-hero-new .gk-slider-next { right: 8px !important; } .gk-hero-new .gk-slider-arrow svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; } } /* Clickable Color Swatches */ .gk-product-colors-wrapper a:hover { transform: scale(1.25) !important; border-color: var(--color-accent-gold, #C8A96E) !important; z-index: 2; } /* ========================================================================== LUXURY FOOTER REDESIGN — Complete Responsive & Desktop Styles ========================================================================== */ /* ---------- 1. VALUE ASSURANCE PILLARS STRIP (FLOATING LUXURY CARD WITH WHITESPACE) ---------- */ .gk-footer-pillars { background: transparent !important; border: none !important; padding: 3.5rem 0 1rem !important; margin-bottom: 2.5rem !important; position: relative; color: rgba(255, 255, 255, 0.88) !important; } .gk-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; background: #0f1115 !important; border: 1px solid rgba(200, 169, 110, 0.35) !important; border-radius: 16px !important; padding: 2.5rem 2.25rem !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important; position: relative; overflow: hidden; } .gk-pillars-grid::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #C8A96E 50%, transparent 100%); opacity: 0.85; } html[data-theme="dark"] .gk-pillars-grid { background: #14161c !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important; } .gk-pillar-item, .gk-pillar-card { display: flex !important; align-items: flex-start !important; gap: 1.1rem !important; } .gk-pillar-icon, .gk-pillar-icon-box { width: 52px !important; height: 52px !important; border-radius: 12px !important; background: linear-gradient(135deg, rgba(200, 169, 110, 0.2) 0%, rgba(200, 169, 110, 0.06) 100%) !important; border: 1px solid rgba(200, 169, 110, 0.38) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; } .gk-pillar-item:hover .gk-pillar-icon, .gk-pillar-card:hover .gk-pillar-icon-box { transform: translateY(-3px) !important; border-color: #C8A96E !important; background: linear-gradient(135deg, rgba(200, 169, 110, 0.32) 0%, rgba(200, 169, 110, 0.14) 100%) !important; box-shadow: 0 8px 20px rgba(200, 169, 110, 0.25) !important; } .gk-pillar-icon svg, .gk-pillar-icon-box svg { stroke: #C8A96E !important; color: #C8A96E !important; } .gk-pillar-text, .gk-pillar-content { display: flex !important; flex-direction: column !important; gap: 4px !important; } .gk-pillar-title { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.98rem !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.3px !important; margin: 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } .gk-pillar-desc { font-family: var(--font-sans, 'Inter', sans-serif) !important; font-size: 0.84rem !important; color: rgba(255, 255, 255, 0.82) !important; line-height: 1.5 !important; margin: 0 !important; } /* ---------- 2. MAIN FOOTER WRAPPER WITH ALMIRAH BACKGROUND ---------- */ footer.gk-footer, .gk-footer { background-color: #0c0e12 !important; background-image: linear-gradient(180deg, rgba(12, 14, 18, 0.93) 0%, rgba(15, 17, 22, 0.84) 45%, rgba(10, 12, 15, 0.95) 100%), radial-gradient(circle at 85% 20%, rgba(200, 169, 110, 0.14) 0%, transparent 55%), url('assets/images/footer-almirah-bg.jpg') !important; background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; color: rgba(255, 255, 255, 0.88) !important; padding: 0 !important; margin: 0 !important; font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.9rem; position: relative; border-top: 1px solid rgba(200, 169, 110, 0.25) !important; overflow: hidden; } /* Subtle architectural watermark & ambient overlay */ footer.gk-footer::before, .gk-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at bottom right, rgba(200, 169, 110, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* Ensure all interactive content stays above backdrop overlays */ footer.gk-footer .gk-container, .gk-footer .gk-container { position: relative; z-index: 2; } /* Guarantee high-contrast text across all Astra/Elementor light-mode inheritance */ footer.gk-footer *, .gk-footer *, .gk-footer-pillars * { box-sizing: border-box; } footer.gk-footer h1, footer.gk-footer h2, footer.gk-footer h3, footer.gk-footer h4, footer.gk-footer h5, footer.gk-footer h6, .gk-footer h1, .gk-footer h2, .gk-footer h3, .gk-footer h4, .gk-footer h5, .gk-footer h6 { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important; } .gk-ft-grid { display: grid; grid-template-columns: 2.2fr 1.1fr 1.1fr 1.2fr 1.8fr; gap: 2.25rem; padding: 3.75rem 0 3rem; } /* ---------- 3. BRAND COLUMN ---------- */ .gk-ft-col-brand { display: flex; flex-direction: column; align-items: flex-start; } .gk-ft-brand-wrap { width: 100%; } .gk-ft-logo { display: inline-block !important; margin-bottom: 1.15rem !important; max-width: 100% !important; line-height: 0 !important; } .gk-ft-logo a, .gk-ft-logo a.custom-logo-link { display: inline-block !important; line-height: 0 !important; } .gk-ft-logo img, .gk-ft-logo .custom-logo, .gk-ft-logo .gk-footer-brand-logo { max-height: 52px !important; max-width: 160px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 !important; box-shadow: none !important; border: none !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important; } .gk-ft-logo-text { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 1.4rem !important; font-weight: 700 !important; letter-spacing: 2px !important; color: #ffffff !important; text-decoration: none !important; display: block !important; margin-bottom: 0.75rem !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important; } .gk-ft-tagline { font-size: 0.88rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.88) !important; margin-bottom: 1.25rem !important; max-width: 320px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* Heritage Tags */ .gk-ft-heritage-tags { display: flex !important; gap: 0.6rem !important; flex-wrap: wrap !important; margin-bottom: 1.15rem !important; } .gk-ft-tag { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; background: rgba(200, 169, 110, 0.16) !important; border: 1px solid rgba(200, 169, 110, 0.45) !important; border-radius: 4px !important; font-size: 0.75rem !important; font-weight: 600 !important; color: #d6b87d !important; letter-spacing: 0.3px !important; backdrop-filter: blur(4px) !important; } .gk-tag-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #C8A96E !important; display: inline-block !important; box-shadow: 0 0 6px #C8A96E !important; } /* Cert Badges */ .gk-ft-cert-badges { display: flex !important; gap: 0.5rem !important; flex-wrap: wrap !important; margin-bottom: 1.35rem !important; } .gk-cert-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 4px 9px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 4px !important; font-size: 0.72rem !important; color: #ffffff !important; letter-spacing: 0.2px !important; transition: all 0.2s ease !important; backdrop-filter: blur(4px) !important; } .gk-cert-chip:hover { border-color: rgba(200, 169, 110, 0.7) !important; color: #ffffff !important; background: rgba(200, 169, 110, 0.18) !important; } .gk-cert-chip svg { stroke: #C8A96E !important; color: #C8A96E !important; } .gk-cert-flag { font-size: 0.85rem !important; } /* Social Icon Links */ .gk-ft-social { display: flex !important; gap: 0.65rem !important; align-items: center !important; } .gk-ft-social-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.09) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; text-decoration: none !important; transition: all 0.25s ease !important; backdrop-filter: blur(4px) !important; } .gk-ft-social-link:hover { background: #C8A96E !important; border-color: #C8A96E !important; color: #0c0e12 !important; transform: translateY(-3px) !important; box-shadow: 0 4px 14px rgba(200, 169, 110, 0.45) !important; } .gk-ft-social-link svg { fill: currentColor !important; } .gk-ft-social-wa:hover { background: #25D366 !important; border-color: #25D366 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45) !important; } /* ---------- 4. NAVIGATION LINK COLUMNS (DESKTOP & ACCORDION) ---------- */ .gk-ft-accordion-col { display: flex; flex-direction: column; } /* Desktop: Reset button completely to a static heading */ .gk-ft-accordion-toggle { display: block !important; width: 100% !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 1.25rem 0 !important; margin: 0 !important; color: #ffffff !important; font-family: inherit !important; text-align: left !important; cursor: default !important; pointer-events: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; } .gk-ft-accordion-toggle:hover, .gk-ft-accordion-toggle:focus, .gk-ft-accordion-toggle:active { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } .gk-ft-toggle-icon { display: none !important; } .gk-ft-heading { font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.92rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #ffffff !important; margin: 0 !important; position: relative !important; display: inline-block !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; } .gk-ft-heading::after { content: '' !important; display: block !important; width: 26px !important; height: 2px !important; background: #C8A96E !important; margin-top: 6px !important; border-radius: 1px !important; box-shadow: 0 0 8px rgba(200, 169, 110, 0.5) !important; } .gk-ft-accordion-panel { display: block; } .gk-ft-links { list-style: none !important; padding: 0 !important; margin: 0 !important; } .gk-ft-links li { margin-bottom: 0.85rem !important; } .gk-ft-links a { color: rgba(255, 255, 255, 0.84) !important; text-decoration: none !important; font-size: 0.88rem !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } .gk-ft-links a:hover { color: #C8A96E !important; padding-left: 6px !important; text-shadow: 0 0 8px rgba(200, 169, 110, 0.4) !important; } .gk-ft-links li.gk-ft-view-all a { color: #C8A96E !important; font-weight: 600 !important; margin-top: 0.35rem !important; } .gk-ft-links li.gk-ft-view-all a:hover { color: #e5cc9f !important; } /* ---------- 5. CONTACT & VIP NEWSLETTER COLUMN ---------- */ .gk-ft-col-contact { display: flex; flex-direction: column; } .gk-ft-col-contact > .gk-ft-heading { margin-bottom: 1.25rem !important; } .gk-ft-contact-box { display: flex !important; flex-direction: column !important; gap: 0.95rem !important; margin-bottom: 1.5rem !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; padding: 1.15rem !important; backdrop-filter: blur(10px) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; } .gk-ft-contact-row { display: flex !important; align-items: flex-start !important; gap: 12px !important; } .gk-ft-contact-row .gk-ft-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 8px !important; background: rgba(200, 169, 110, 0.15) !important; border: 1px solid rgba(200, 169, 110, 0.35) !important; color: #C8A96E !important; flex-shrink: 0 !important; margin-top: 2px !important; } .gk-ft-contact-row .gk-ft-icon svg { color: #C8A96E !important; stroke: #C8A96E !important; } .gk-ft-contact-row .gk-ft-icon-wa { color: #25D366 !important; background: rgba(37, 211, 102, 0.15) !important; border-color: rgba(37, 211, 102, 0.4) !important; } .gk-ft-contact-row .gk-ft-icon-wa svg { fill: #25D366 !important; stroke: none !important; } .gk-ft-row-content { display: flex !important; flex-direction: column !important; gap: 2px !important; font-size: 0.84rem !important; line-height: 1.45 !important; } .gk-ft-row-content strong { font-size: 0.74rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #d6b87d !important; font-weight: 600 !important; } .gk-ft-row-content span { color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } .gk-ft-row-content a { color: #ffffff !important; text-decoration: none !important; font-weight: 500 !important; transition: color 0.2s ease !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } .gk-ft-row-content a:hover { color: #C8A96E !important; text-decoration: underline !important; } /* VIP Newsletter Wrapper & Form */ .gk-ft-newsletter-wrapper { background: rgba(200, 169, 110, 0.06) !important; border: 1px solid rgba(200, 169, 110, 0.25) !important; border-radius: 10px !important; padding: 1.15rem !important; max-width: 360px !important; backdrop-filter: blur(10px) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; } .gk-ft-news-label { display: block !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.5px !important; margin-bottom: 0.35rem !important; } .gk-ft-news-desc { font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.82) !important; line-height: 1.45 !important; margin-bottom: 0.85rem !important; } .gk-ft-newsletter-form { display: flex !important; gap: 8px !important; position: relative !important; } .gk-ft-newsletter-form input[type="email"] { flex: 1 !important; background: rgba(20, 22, 28, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 6px !important; padding: 0.55rem 0.85rem !important; font-size: 0.85rem !important; color: #ffffff !important; outline: none !important; transition: border-color 0.2s ease, background 0.2s ease !important; min-width: 0 !important; height: auto !important; line-height: 1.4 !important; } .gk-ft-newsletter-form input[type="email"]:focus { border-color: #C8A96E !important; background: rgba(30, 33, 40, 0.95) !important; } .gk-ft-newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55) !important; } .gk-ft-newsletter-form button[type="submit"], .gk-ft-newsletter-form button { background: #C8A96E !important; background-color: #C8A96E !important; color: #0c0e12 !important; font-family: inherit !important; font-weight: 700 !important; font-size: 0.82rem !important; letter-spacing: 0.5px !important; padding: 0.55rem 1.25rem !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.2s ease !important; white-space: nowrap !important; box-shadow: 0 2px 10px rgba(200, 169, 110, 0.35) !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .gk-ft-newsletter-form button[type="submit"]:hover, .gk-ft-newsletter-form button:hover { background: #dfc28b !important; background-color: #dfc28b !important; color: #0c0e12 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(200, 169, 110, 0.5) !important; } .gk-ft-newsletter-form button.is-done { background: #25D366 !important; background-color: #25D366 !important; color: #ffffff !important; } /* ---------- 6. MIDDLE TRUST & PAYMENTS STRIP ---------- */ .gk-ft-middle-strip { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; gap: 1.5rem; flex-wrap: wrap; } .gk-ft-security-badge, .gk-ft-middle-cert { display: flex !important; align-items: center !important; gap: 10px !important; color: rgba(255, 255, 255, 0.88) !important; } .gk-ft-security-badge svg, .gk-ft-middle-cert svg { color: #C8A96E !important; stroke: #C8A96E !important; flex-shrink: 0 !important; } .gk-ft-sec-info { display: flex !important; flex-direction: column !important; gap: 2px !important; } .gk-sec-title { font-size: 0.85rem !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.3px !important; } .gk-sec-sub { font-size: 0.74rem !important; color: rgba(255, 255, 255, 0.78) !important; } /* ---------- 7. PAYMENT BADGES ---------- */ .gk-ft-payment-methods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gk-pay-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(20, 22, 28, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 6px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; backdrop-filter: blur(4px); } .gk-pay-badge:hover { border-color: rgba(200, 169, 110, 0.6) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .gk-pay-badge svg { display: block; border-radius: 3px; flex-shrink: 0; } .gk-pay-badge span { font-size: 0.74rem !important; font-weight: 500 !important; color: #ffffff !important; letter-spacing: 0.2px; } /* ---------- 8. BOTTOM COPYRIGHT & LEGAL BAR ---------- */ .gk-ft-bottom-bar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 2.25rem; font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.8) !important; gap: 1.25rem; flex-wrap: wrap; } .gk-ft-bottom-left p { margin: 0; color: rgba(255, 255, 255, 0.8) !important; } .gk-ft-bottom-left strong { color: #ffffff !important; } .gk-ft-bottom-links { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .gk-ft-bottom-links a { color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; transition: color 0.2s ease; } .gk-ft-bottom-links a:hover { color: #C8A96E !important; } .gk-sep { color: rgba(255, 255, 255, 0.35) !important; font-size: 0.65rem; } .gk-ft-bottom-right { color: rgba(255, 255, 255, 0.8) !important; font-style: italic; } /* ---------- 9. MOBILE RESPONSIVENESS & BOTTOM NAVIGATION ---------- */ .gk-mobile-nav { display: none; } @media (max-width: 1200px) { .gk-ft-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr; gap: 1.75rem; } } @media (max-width: 991px) { footer.gk-footer { padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); } .gk-footer-pillars { padding: 2rem 0 0.75rem !important; margin-bottom: 2rem !important; } .gk-pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; padding: 1.75rem 1.25rem !important; border-radius: 12px !important; } .gk-ft-grid { display: flex; flex-direction: column; gap: 0; padding: 2.5rem 0 1.5rem; } .gk-ft-col-brand { padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .gk-ft-tagline { max-width: 100%; } .gk-ft-accordion-col { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .gk-ft-accordion-toggle { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 1.15rem 0 !important; margin: 0 !important; cursor: pointer !important; pointer-events: auto !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .gk-ft-accordion-toggle .gk-ft-heading { margin: 0 !important; padding: 0 !important; font-size: 0.92rem !important; letter-spacing: 1px !important; } .gk-ft-accordion-toggle .gk-ft-heading::after { display: none !important; } .gk-ft-toggle-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: rgba(200, 169, 110, 0.1) !important; color: #C8A96E !important; font-size: 1.15rem !important; font-weight: 300 !important; line-height: 1 !important; transition: all 0.3s ease !important; } .gk-ft-accordion-toggle[aria-expanded="true"] .gk-ft-toggle-icon { background: #C8A96E !important; color: #141414 !important; transform: rotate(180deg) !important; } .gk-ft-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .gk-ft-accordion-panel .gk-ft-links { padding-bottom: 1.25rem; } .gk-ft-accordion-panel .gk-ft-links li { margin-bottom: 0.75rem; } .gk-ft-accordion-panel .gk-ft-links li a { font-size: 0.9rem; padding: 2px 0; } .gk-ft-col-contact { padding-top: 2rem; } .gk-ft-middle-strip { flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .gk-ft-payment-methods { justify-content: center; } .gk-ft-bottom-bar { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-bottom: 2rem; } .gk-ft-bottom-links { justify-content: center; } /* App-Style Floating Bottom Navigation Bar */ .gk-mobile-nav { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: rgba(24, 24, 24, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; align-items: center; box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.4); } .gk-mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 2px; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: all 0.2s ease; position: relative; } .gk-mobile-nav-item .gk-nav-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; line-height: 1; color: inherit; } .gk-mobile-nav-item .gk-nav-icon-wrap { display: flex; align-items: center; justify-content: center; position: relative; width: 24px; height: 24px; } .gk-mobile-nav-item .gk-nav-icon-wrap svg { width: 20px; height: 20px; transition: transform 0.2s ease, stroke 0.2s ease; } .gk-mobile-nav-item.is-active, .gk-mobile-nav-item.active, .gk-mobile-nav-item:hover { color: #C8A96E; } .gk-mobile-nav-item.is-active .gk-nav-icon-wrap svg, .gk-mobile-nav-item.active .gk-nav-icon-wrap svg { stroke: #C8A96E; transform: translateY(-1px); } .gk-mobile-nav-badge { position: absolute; top: -5px; right: -9px; background: #C8A96E; color: #141414; font-size: 0.62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } html:not([data-theme="dark"]) .gk-mobile-nav { background: rgba(255, 255, 255, 0.94); border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); } html:not([data-theme="dark"]) .gk-mobile-nav-item { color: #666666; } html:not([data-theme="dark"]) .gk-mobile-nav-item.is-active, html:not([data-theme="dark"]) .gk-mobile-nav-item.active, html:not([data-theme="dark"]) .gk-mobile-nav-item:hover { color: #B69A64; } html:not([data-theme="dark"]) .gk-mobile-nav-item.is-active .gk-nav-icon-wrap svg, html:not([data-theme="dark"]) .gk-mobile-nav-item.active .gk-nav-icon-wrap svg { stroke: #B69A64; } .gk-whatsapp-float { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; left: 18px !important; right: auto !important; width: 50px !important; height: 50px !important; z-index: 9998 !important; } .gk-whatsapp-float svg { width: 28px !important; height: 28px !important; } /* On single product page where sticky purchase bar is active, elevate WhatsApp icon above the bar */ body.single-product .gk-whatsapp-float, .single-product .gk-whatsapp-float { bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important; left: 18px !important; right: auto !important; } #ast-scroll-top { bottom: calc(145px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; z-index: 9997 !important; } } @media (max-width: 576px) { .gk-pillars-grid { grid-template-columns: 1fr; gap: 1.25rem; } .gk-footer-pillars { padding: 1.5rem 0 0.5rem !important; margin-bottom: 1.5rem !important; } } /* Universal Light & Dark Mode Footer Contrast Enforcement */ footer.gk-footer, .gk-footer { background-color: #141414 !important; color: rgba(255, 255, 255, 0.85) !important; } footer.gk-footer a, .gk-footer a { color: rgba(255, 255, 255, 0.85) !important; } footer.gk-footer a:hover, .gk-footer a:hover { color: #C8A96E !important; } footer.gk-footer h1, footer.gk-footer h2, footer.gk-footer h3, footer.gk-footer h4, footer.gk-footer h5, footer.gk-footer h6, .gk-footer h1, .gk-footer h2, .gk-footer h3, .gk-footer h4, .gk-footer h5, .gk-footer h6 { color: #ffffff !important; } footer.gk-footer p, footer.gk-footer span, footer.gk-footer div, footer.gk-footer li, .gk-footer p, .gk-footer span, .gk-footer div, .gk-footer li { color: inherit; } /* ========================================================================== MASTER FIX: WHITE FIXED NAVBAR & UNCROPPED 2:1 HERO SLIDER (DESKTOP & MOBILE) ========================================================================== */ :root { --gk-header-height: 74px; } @media (max-width: 768px) { :root { --gk-header-height: 58px; } } /* 1. Body content offset: prevent fixed navbar from obscuring content */ body { padding-top: var(--gk-header-height) !important; } /* 2. Fixed White Navbar across all pages and viewports */ header.gk-header, .gk-header, body.home .gk-header, body.home header.gk-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background: #FFFFFF !important; background-color: #FFFFFF !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; border-bottom: 1px solid #f0f0f0 !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-sizing: border-box !important; } /* Scrolled state: keep pure white, never transparent or dark */ header.gk-header.gk-header--scrolled, .gk-header.gk-header--scrolled, body.home .gk-header.gk-header--scrolled, body.home header.gk-header.gk-header--scrolled { background: #FFFFFF !important; background-color: #FFFFFF !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid #e8e8e8 !important; transform: none !important; } /* Ensure navbar NEVER hides on scroll */ .gk-header.gk-header--hidden, header.gk-header.gk-header--hidden, body.home .gk-header.gk-header--hidden { transform: none !important; } /* WP Admin Bar adjustments */ body.admin-bar .gk-header, body.admin-bar header.gk-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .gk-header, body.admin-bar header.gk-header { top: 46px !important; } } /* Dark Mode Exception */ html[data-theme="dark"] header.gk-header, html[data-theme="dark"] .gk-header, html[data-theme="dark"] body.home .gk-header { background: #171613 !important; background-color: #171613 !important; border-bottom-color: #2a2824 !important; } /* Navbar Nav Links */ .gk-header .gk-nav a, body.home .gk-header .gk-nav a { color: #1a1a1a !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } .gk-header .gk-nav a:hover, body.home .gk-header .gk-nav a:hover { color: #c89a3f !important; } html[data-theme="dark"] .gk-header .gk-nav a, html[data-theme="dark"] body.home .gk-header .gk-nav a { color: #F1EEE7 !important; } html[data-theme="dark"] .gk-header .gk-nav a:hover, html[data-theme="dark"] body.home .gk-header .gk-nav a:hover { color: #c89a3f !important; } /* Navbar Action Icons */ .gk-header .gk-header-icons a, .gk-header .gk-header-icons svg, body.home .gk-header .gk-header-icons a, body.home .gk-header .gk-header-icons svg { color: #1a1a1a !important; stroke: #1a1a1a !important; } .gk-header .gk-header-icons a:hover svg, body.home .gk-header .gk-header-icons a:hover svg { stroke: #c89a3f !important; } html[data-theme="dark"] .gk-header .gk-header-icons a, html[data-theme="dark"] .gk-header .gk-header-icons svg, html[data-theme="dark"] .gk-header .gk-header-icons button, html[data-theme="dark"] body.home .gk-header .gk-header-icons a, html[data-theme="dark"] body.home .gk-header .gk-header-icons svg { color: #F1EEE7 !important; stroke: #F1EEE7 !important; } html[data-theme="dark"] .gk-header .gk-header-icons a:hover svg, html[data-theme="dark"] body.home .gk-header .gk-header-icons a:hover svg { stroke: #c89a3f !important; } /* Hamburger menu button on mobile */ .gk-header .gk-hamburger svg, body.home .gk-header .gk-hamburger svg { stroke: #1a1a1a !important; } .gk-header .gk-hamburger span, body.home .gk-header .gk-hamburger span { background-color: #1a1a1a !important; } /* Deliver To Widget */ .gk-header .gk-deliver-label { color: #666666 !important; } .gk-header .gk-deliver-location { color: #111111 !important; } html[data-theme="dark"] .gk-header .gk-deliver-label { color: var(--color-text-muted, #C9C4B8) !important; } html[data-theme="dark"] .gk-header .gk-deliver-location { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-header .gk-hamburger svg, html[data-theme="dark"] body.home .gk-header .gk-hamburger svg { stroke: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-header .gk-hamburger span, html[data-theme="dark"] body.home .gk-header .gk-hamburger span { background-color: var(--color-text-dark, #F1EEE7) !important; } /* Location Modal Dark Mode */ html[data-theme="dark"] .gk-location-modal { background: var(--color-bg-card, #232019) !important; color: var(--color-text-dark, #F1EEE7) !important; border: 1px solid var(--color-border, #3A362D) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .gk-location-modal h3 { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-location-modal p { color: var(--color-text-muted, #C9C4B8) !important; } html[data-theme="dark"] .gk-location-modal input { background: var(--color-bg-light, #171613) !important; color: var(--color-text-dark, #F1EEE7) !important; border: 1px solid var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-location-close { color: var(--color-text-muted, #C9C4B8) !important; } /* 3. Hero Slider: Responsive 16:9 ratio, full-bleed fitting on mobile & desktop */ .gk-hero-new, body.home .gk-hero-new { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; background-color: #f6f6f6 !important; background-image: none !important; margin-top: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; } .gk-hero-bg-slides, body.home .gk-hero-bg-slides { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; overflow: hidden !important; } .gk-hero-bg-slide, body.home .gk-hero-bg-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0 !important; transform: none !important; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .gk-hero-bg-slide.is-active, body.home .gk-hero-bg-slide.is-active { opacity: 1 !important; } /* 4. USP Marquee Bar: Sleek Infinite Ticker */ .gk-usp-bar, body.home .gk-usp-bar { position: relative !important; z-index: 5 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0.85rem 0 !important; background: #FAF9F6 !important; border-top: 1px solid #EAE8E3 !important; border-bottom: 1px solid #EAE8E3 !important; box-shadow: none !important; overflow: hidden !important; width: 100% !important; } html[data-theme="dark"] .gk-usp-bar, html[data-theme="dark"] .gk-marquee-bar, body.dark-mode .gk-usp-bar, body.dark-mode .gk-marquee-bar { background: #131311 !important; border-top-color: #24221d !important; border-bottom-color: #24221d !important; } html[data-theme="dark"] .gk-usp-title, html[data-theme="dark"] body.home .gk-usp-title, body.dark-mode .gk-usp-title, body.dark-mode.home .gk-usp-title { color: #F8F6F0 !important; } html[data-theme="dark"] .gk-usp-sub, html[data-theme="dark"] body.home .gk-usp-sub, body.dark-mode .gk-usp-sub, body.dark-mode.home .gk-usp-sub { color: #B8B3A8 !important; } html[data-theme="dark"] .gk-usp-icon-wrap, html[data-theme="dark"] body.home .gk-usp-icon-wrap, body.dark-mode .gk-usp-icon-wrap, body.dark-mode.home .gk-usp-icon-wrap { background: rgba(200, 169, 110, 0.15) !important; } html[data-theme="dark"] .gk-usp-icon-wrap svg, html[data-theme="dark"] body.home .gk-usp-icon-wrap svg, body.dark-mode .gk-usp-icon-wrap svg, body.dark-mode.home .gk-usp-icon-wrap svg { stroke: #C8A96E !important; color: #C8A96E !important; } @media (max-width: 768px) { .gk-header { padding: 0.75rem 1rem !important; } .gk-header-left { gap: 12px !important; } .gk-hero-new, body.home .gk-hero-new { height: auto !important; aspect-ratio: 2 / 1 !important; } .gk-usp-bar, body.home .gk-usp-bar { margin-top: 0 !important; padding: 0.65rem 0 !important; } } @media (max-width: 480px) { .gk-header { padding: 0.65rem 0.85rem !important; } .gk-header-left { gap: 10px !important; } .gk-deliver-to-nav { gap: 5px !important; } .gk-deliver-location { font-size: 0.78rem !important; } .gk-header-icons { gap: 0.65rem !important; } .gk-hero-new, body.home .gk-hero-new { height: auto !important; aspect-ratio: 2 / 1 !important; } .gk-usp-bar, body.home .gk-usp-bar { margin-top: 0 !important; padding: 0.45rem 0 !important; } .gk-usp-grid, body.home .gk-usp-grid { gap: 0.35rem 0.5rem !important; } .gk-usp-item, body.home .gk-usp-item { gap: 0.45rem !important; } .gk-usp-title, body.home .gk-usp-title { font-size: 0.71rem !important; } .gk-usp-sub, body.home .gk-usp-sub { font-size: 0.61rem !important; } } /* ========================================================================== HOMEPAGE COMPACT LUXURY LAYOUT (ZERO UNNECESSARY WHITESPACE) ========================================================================== */ /* Universal Section Spacing on Homepage */ body.home section, body.home .gk-featured-cats, body.home .gk-bestsellers, body.home .gk-new-arrivals, body.home .gk-deals-section, body.home .gk-drawers-section, body.home .gk-office-section, body.home .gk-bespoke-section, body.home .gk-heritage-section, body.home .gk-homepage-trust, body.home .gk-testimonials-section, body.home .gk-faq-section { padding: 2.25rem 0 !important; margin: 0 !important; } .gk-featured-cats, body.home .gk-featured-cats { padding: 1.5rem 0 2rem !important; margin: 0 !important; } /* Compact Section Headers */ body.home .gk-section-header, .gk-section-header { margin-bottom: 1.25rem !important; text-align: center; } body.home .gk-section-subtitle, .gk-section-subtitle { display: block; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 2px !important; color: var(--color-accent-gold, #C8A96E) !important; margin-bottom: 0.25rem !important; text-transform: uppercase; } body.home .section-title, .section-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important; font-weight: 700 !important; color: var(--color-text-dark, #1B1B1B) !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-family: var(--font-heading, 'Poppins', sans-serif) !important; } html[data-theme="dark"] body.home .section-title, body.dark-mode.home .section-title { color: #F1EEE7 !important; } /* Grids & Cards Spacing */ body.home .gk-cat-grid, .gk-cat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; } body.home .gk-cat-card, .gk-cat-card { aspect-ratio: 3 / 4 !important; height: auto !important; } body.home .gk-grid-4, .gk-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; margin-bottom: 1.25rem !important; } @media (min-width: 992px) { body.home .gk-office-grid { grid-template-columns: repeat(3, 1fr) !important; } } body.home .gk-load-more-wrap { margin-top: 0.75rem !important; margin-bottom: 0.5rem !important; } /* Bespoke Card Compactness */ body.home .gk-bespoke-card { padding: 2.25rem 2.5rem !important; border-radius: 14px !important; } /* Trust Badges Marquee Wrapper */ body.home .gk-trust-badges-wrapper { padding: 1.25rem 0 !important; } /* Mobile View Adjustments */ @media (max-width: 1024px) and (min-width: 769px) { body.home .gk-cat-grid, .gk-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.15rem !important; } body.home .gk-grid-4, .gk-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.15rem !important; } } @media (max-width: 768px) { body.home .gk-container { padding-left: 0.85rem !important; padding-right: 0.85rem !important; } body.home section, body.home .gk-featured-cats, body.home .gk-bestsellers, body.home .gk-new-arrivals, body.home .gk-deals-section, body.home .gk-drawers-section, body.home .gk-office-section, body.home .gk-bespoke-section, body.home .gk-heritage-section, body.home .gk-homepage-trust, body.home .gk-testimonials-section, body.home .gk-faq-section { padding: 1.25rem 0 !important; } body.home .gk-featured-cats { padding: 0.75rem 0 1.15rem !important; } body.home .gk-section-header, .gk-section-header { margin-bottom: 0.75rem !important; } body.home .gk-section-subtitle, .gk-section-subtitle { font-size: 0.68rem !important; letter-spacing: 1.5px !important; margin-bottom: 0.15rem !important; } body.home .section-title, .section-title { font-size: 1.35rem !important; margin: 0 !important; letter-spacing: 0.3px !important; } body.home .gk-cat-grid, .gk-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } body.home .gk-grid-4, .gk-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 1rem !important; } body.home .gk-bespoke-card { padding: 1.25rem 1rem !important; border-radius: 10px !important; } body.home .gk-stats-grid { gap: 0.75rem !important; } body.home .gk-trust-badges-wrapper { padding: 0.85rem 0 !important; } body.home .gk-testimonials-section { padding: 1.25rem 0 !important; } body.home .gk-faq-section { padding: 1.25rem 0 2rem !important; } body.home .gk-faq-list { margin-top: 1rem !important; } } @media (max-width: 480px) { body.home .gk-cat-grid, .gk-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } body.home .gk-grid-4, .gk-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } } /* ========================================================================== CHECKOUT & CARTFLOWS ORDER REVIEW STYLES ========================================================================== */ .gk-checkout-item-cell { display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important; margin: 4px 0 !important; } .gk-checkout-item-thumb-wrapper { position: relative !important; width: 52px !important; min-width: 52px !important; height: 52px !important; border-radius: 8px !important; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; flex-shrink: 0 !important; } .gk-checkout-item-thumb-wrapper img.gk-checkout-prod-img, .gk-checkout-item-thumb-wrapper img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 6px !important; display: block !important; } .gk-checkout-item-qty-badge { position: absolute !important; top: -6px !important; right: -6px !important; background: var(--color-ink, #1b1b1b) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; padding: 3px 6px !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; z-index: 5 !important; } .gk-checkout-item-info { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; } .gk-checkout-item-title { font-weight: 600 !important; font-size: 14px !important; line-height: 1.35 !important; color: inherit !important; } td.product-name > strong.product-quantity, .wcf-ic-order-review-product strong.product-quantity { display: none !important; } /* 2. Shop Page Catalogue Header */ .gk-catalogue-header { text-align: center; background: var(--color-bg-card, #F8F9FA); border-bottom: 1px solid var(--color-border, #E8E5DF); padding: 1.15rem 1rem 0.75rem; } .gk-catalogue-header h1 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; color: var(--color-text-dark, #1B1B1B); margin: 0 0 0.2rem 0; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-heading, 'Poppins', sans-serif); } .gk-catalogue-header p { color: var(--color-text-muted, #666); font-size: 0.85rem; margin: 0; line-height: 1.35; } @media (max-width: 768px) { .gk-catalogue-header { padding: 0.85rem 1rem 0.55rem; } .gk-catalogue-header h1 { font-size: 1.25rem; letter-spacing: 0.5px; margin-bottom: 0.15rem; } .gk-catalogue-header p { font-size: 0.78rem; } } html[data-theme="dark"] .gk-catalogue-header { background: var(--color-bg-card, #232019) !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-catalogue-header h1 { color: #F1EEE7 !important; } html[data-theme="dark"] .gk-catalogue-header p { color: #C9C4B8 !important; } /* 3. Universal Primary Buttons Contrast (Distributor, Warranty, Contact, Careers, etc.) */ html[data-theme="dark"] .gk-btn-primary, html[data-theme="dark"] button.gk-btn-primary, html[data-theme="dark"] a.gk-btn-primary, html[data-theme="dark"] input[type="submit"].gk-btn-primary, html[data-theme="dark"] button[type="submit"].gk-btn-primary { background: var(--color-accent-gold, #CBAE78) !important; background-color: var(--color-accent-gold, #CBAE78) !important; color: #0C1815 !important; -webkit-text-fill-color: #0C1815 !important; border-color: var(--color-accent-gold, #CBAE78) !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(203, 174, 120, 0.25) !important; } html[data-theme="dark"] .gk-btn-primary:hover, html[data-theme="dark"] button.gk-btn-primary:hover, html[data-theme="dark"] a.gk-btn-primary:hover, html[data-theme="dark"] input[type="submit"].gk-btn-primary:hover, html[data-theme="dark"] button[type="submit"].gk-btn-primary:hover { background: #E5C992 !important; background-color: #E5C992 !important; color: #0C1815 !important; -webkit-text-fill-color: #0C1815 !important; border-color: #E5C992 !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(203, 174, 120, 0.35) !important; } /* 4. WooCommerce & Archive Pagination */ .woocommerce nav.woocommerce-pagination, .gk-pagination, nav.pagination { margin: 3.5rem 0 2.5rem !important; text-align: center !important; } .woocommerce nav.woocommerce-pagination ul, .gk-pagination ul { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .woocommerce nav.woocommerce-pagination ul li, .gk-pagination ul li { border: none !important; padding: 0 !important; margin: 0 !important; float: none !important; display: inline-block !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .gk-pagination a, .gk-pagination span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; height: 44px !important; padding: 0 14px !important; border-radius: 6px !important; font-size: 0.95rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; background: #FFFFFF !important; color: #222222 !important; border: 1.5px solid var(--color-border, #D1CFC9) !important; line-height: 1 !important; margin: 0 !important; } .woocommerce nav.woocommerce-pagination ul li a:hover, .gk-pagination a:hover { background: var(--color-accent-gold, #B69A64) !important; color: #0C1815 !important; border-color: var(--color-accent-gold, #B69A64) !important; transform: translateY(-2px); } .woocommerce nav.woocommerce-pagination ul li span.current, .gk-pagination span.current { background: var(--color-accent-gold, #B69A64) !important; color: #0C1815 !important; border-color: var(--color-accent-gold, #B69A64) !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(182, 154, 100, 0.3) !important; } /* Dark Mode Pagination Overrides */ html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a, html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span:not(.current), html[data-theme="dark"] .gk-pagination a, html[data-theme="dark"] .gk-pagination span:not(.current) { background: var(--color-bg-card, #232019) !important; color: #F1EEE7 !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a:hover, html[data-theme="dark"] .gk-pagination a:hover { background: var(--color-accent-gold, #CBAE78) !important; color: #0C1815 !important; border-color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span.current, html[data-theme="dark"] .gk-pagination span.current { background: var(--color-accent-gold, #CBAE78) !important; color: #0C1815 !important; border-color: var(--color-accent-gold, #CBAE78) !important; } /* 5. WooCommerce My Account Dashboard & Tabs */ .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 2rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--color-border, #E8E5DF); border-radius: 8px; overflow: hidden; background: var(--color-bg-card, #F8F7F4); } .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--color-border, #E8E5DF) !important; margin: 0 !important; padding: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 14px 20px; color: var(--color-text-dark, #222222); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.2s ease, color 0.2s ease; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(182, 154, 100, 0.12); color: var(--color-accent-gold, #B69A64); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--color-accent-gold, #B69A64) !important; color: #0C1815 !important; font-weight: 700 !important; } .woocommerce-account .woocommerce-MyAccount-content { color: var(--color-text-dark, #222222); line-height: 1.8; } .woocommerce-account .woocommerce-MyAccount-content p { color: var(--color-text-muted, #555555); margin-bottom: 1.25rem; } .woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--color-accent-gold, #B69A64); font-weight: 600; text-decoration: underline; } /* Dark Mode My Account Overrides */ html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul { background: #1C221F !important; border-color: #2D3833 !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-color: #2D3833 !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: #EDE8DF !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(203, 174, 120, 0.18) !important; color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--color-accent-gold, #CBAE78) !important; color: #0C1815 !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-content { color: #F1EEE7 !important; } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-content p { color: #C9C4B8 !important; } html[data-theme="dark"] .woocommerce-account table.woocommerce-orders-table, html[data-theme="dark"] .woocommerce-account table.woocommerce-table--order-downloads { background: #1C221F !important; border-color: #2D3833 !important; color: #F1EEE7 !important; } html[data-theme="dark"] .woocommerce-account table th, html[data-theme="dark"] .woocommerce-account table td { border-color: #2D3833 !important; color: #F1EEE7 !important; } html[data-theme="dark"] .woocommerce-Address { background: #1C221F !important; border: 1px solid #2D3833 !important; padding: 24px !important; border-radius: 8px !important; } html[data-theme="dark"] .woocommerce-Address-title h3 { color: #F1EEE7 !important; } html[data-theme="dark"] .woocommerce-Address address { color: #C9C4B8 !important; } /* 6. Mobile Menu Drawer Styling */ .gk-mobile-menu { background: #FFFFFF !important; display: flex !important; flex-direction: column !important; } .gk-mobile-menu-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0.9rem 1.25rem !important; border-bottom: 1px solid #EEEEEE !important; position: sticky !important; top: 0 !important; background: #FFFFFF !important; z-index: 10 !important; min-height: 56px !important; box-sizing: border-box !important; } .gk-mobile-menu-logo { display: flex !important; align-items: center !important; max-height: 38px !important; } .gk-mobile-logo-img { max-height: 34px !important; width: auto !important; max-width: 130px !important; object-fit: contain !important; display: block !important; } .gk-mobile-logo-text { font-weight: 700 !important; color: var(--color-accent-gold, #B69A64) !important; font-size: 1.15rem !important; letter-spacing: 0.5px !important; } .gk-mobile-logo-link { display: inline-flex !important; align-items: center !important; text-decoration: none !important; } button.gk-mobile-menu-close, .gk-mobile-menu-close { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border-radius: 50% !important; background: #F3F4F6 !important; background-color: #F3F4F6 !important; border: none !important; outline: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; color: #1F2937 !important; line-height: 1 !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; } button.gk-mobile-menu-close:hover, .gk-mobile-menu-close:hover { background: #E5E7EB !important; background-color: #E5E7EB !important; color: #000000 !important; } button.gk-mobile-menu-close svg, .gk-mobile-menu-close svg { stroke: currentColor !important; width: 18px !important; height: 18px !important; display: block !important; margin: 0 !important; } /* User Account Quick Card */ .gk-mobile-user-card { margin: 1rem 1.25rem 0.75rem 1.25rem !important; background: #FAF8F5 !important; border: 1px solid #EAE5D9 !important; border-radius: 12px !important; overflow: hidden !important; transition: all 0.2s ease !important; } .gk-mobile-user-card:hover { border-color: #D4AF37 !important; background: #F4EFE6 !important; } .gk-mobile-user-card a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0.85rem 1rem !important; text-decoration: none !important; } .gk-user-avatar-icon { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #111827 !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .gk-user-info { flex: 1 !important; min-width: 0 !important; } .gk-user-title { font-size: 0.92rem !important; font-weight: 700 !important; color: #111827 !important; display: block !important; line-height: 1.2 !important; } .gk-user-sub { font-size: 0.75rem !important; color: #6B7280 !important; display: block !important; margin-top: 2px !important; line-height: 1.2 !important; } .gk-mobile-user-card .gk-chevron-right { color: #9CA3AF !important; flex-shrink: 0 !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list { list-style: none !important; margin: 0 !important; padding: 0.25rem 0 1.5rem 0 !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li { border-bottom: 1px solid #F3F4F6 !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li a { display: flex !important; align-items: center !important; gap: 14px !important; padding: 0.95rem 1.25rem !important; color: #1F2937 !important; font-weight: 600 !important; font-size: 0.92rem !important; text-decoration: none !important; transition: all 0.2s ease !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li a:hover { background: #F9FAFB !important; color: var(--color-accent-gold, #B69A64) !important; padding-left: 1.5rem !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li a svg { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; color: #6B7280 !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li.gk-mobile-nav-featured { background: rgba(182, 154, 100, 0.08) !important; } .gk-mobile-menu-body ul.gk-mobile-nav-list li.gk-mobile-nav-featured a { color: #8C6D23 !important; font-weight: 700 !important; } /* Mobile Menu Dark Mode */ html[data-theme="dark"] .gk-mobile-menu { background: #141816 !important; } html[data-theme="dark"] .gk-mobile-menu-header { background: #141816 !important; border-color: #26302C !important; } html[data-theme="dark"] button.gk-mobile-menu-close, html[data-theme="dark"] .gk-mobile-menu-close { background: #26302C !important; background-color: #26302C !important; color: #EDE8DF !important; } html[data-theme="dark"] button.gk-mobile-menu-close:hover, html[data-theme="dark"] .gk-mobile-menu-close:hover { background: #36423D !important; background-color: #36423D !important; color: #FFFFFF !important; } html[data-theme="dark"] .gk-mobile-user-card { background: #1B211E !important; border-color: #2D3934 !important; } html[data-theme="dark"] .gk-mobile-user-card .gk-user-avatar-icon { background: #B69A64 !important; color: #141816 !important; } html[data-theme="dark"] .gk-mobile-user-card .gk-user-title { color: #EDE8DF !important; } html[data-theme="dark"] .gk-mobile-user-card .gk-user-sub { color: #8E9B95 !important; } html[data-theme="dark"] .gk-mobile-menu-body ul.gk-mobile-nav-list li { border-color: #26302C !important; } html[data-theme="dark"] .gk-mobile-menu-body ul.gk-mobile-nav-list li a { color: #EDE8DF !important; } html[data-theme="dark"] .gk-mobile-menu-body ul.gk-mobile-nav-list li a:hover { background: #1A201D !important; color: #D4AF37 !important; } html[data-theme="dark"] .gk-mobile-menu-body ul.gk-mobile-nav-list li.gk-mobile-nav-featured { background: rgba(182, 154, 100, 0.15) !important; } html[data-theme="dark"] .gk-mobile-menu-body ul.gk-mobile-nav-list li.gk-mobile-nav-featured a { color: #F1EEE7 !important; } /* ========================================================================== INFINITE SCROLL LOADER & STATUS STYLING ========================================================================== */ .gk-shop-page nav.woocommerce-pagination, .gk-shop-page .gk-pagination, .gk-shop-content nav.woocommerce-pagination, .gk-shop-content .gk-pagination { display: none !important; } .gk-infinite-scroll-status { width: 100% !important; text-align: center !important; padding: 2rem 0 1.5rem !important; display: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.85rem !important; } .gk-infinite-scroll-status.is-active { display: flex !important; } .gk-infinite-spinner { width: 32px !important; height: 32px !important; border: 3px solid rgba(182, 154, 100, 0.2) !important; border-top-color: var(--color-accent-gold, #C8A96E) !important; border-radius: 50% !important; animation: gkInfiniteSpin 0.75s linear infinite !important; } @keyframes gkInfiniteSpin { to { transform: rotate(360deg); } } .gk-infinite-loading-text { font-size: 0.88rem !important; font-weight: 600 !important; color: var(--color-text-muted, #777777) !important; letter-spacing: 0.3px !important; } .gk-infinite-scroll-end { width: 100% !important; text-align: center !important; padding: 2rem 0 1.5rem !important; font-size: 0.88rem !important; font-weight: 500 !important; color: var(--color-text-muted, #888888) !important; letter-spacing: 0.2px !important; } .gk-infinite-scroll-end span { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.45rem 1.35rem !important; border-radius: 20px !important; background: rgba(0, 0, 0, 0.04) !important; } html[data-theme="dark"] .gk-infinite-scroll-end span, body.dark-mode .gk-infinite-scroll-end span { background: rgba(255, 255, 255, 0.06) !important; color: #A9A49A !important; } html[data-theme="dark"] .gk-infinite-loading-text, body.dark-mode .gk-infinite-loading-text { color: #C8A96E !important; } /* ────────────────────────────────────── * No Products Found Empty State * ────────────────────────────────────── */ .gk-no-products-container { padding: 3.5rem 1.5rem !important; text-align: center !important; background: #FFFFFF !important; border: 1px dashed var(--color-border, #E5E7EB) !important; border-radius: 14px !important; margin: 1.5rem 0 2.5rem 0 !important; } html[data-theme="dark"] .gk-no-products-container, body.dark-mode .gk-no-products-container { background: #1B1E23 !important; border-color: #2D333B !important; } .gk-no-products-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; height: 72px !important; background: rgba(182, 154, 100, 0.12) !important; color: var(--color-accent-gold, #B69A64) !important; border-radius: 50% !important; margin-bottom: 1.25rem !important; } .gk-no-products-title { font-size: 1.35rem !important; font-weight: 700 !important; color: var(--color-text-dark, #111827) !important; margin: 0 0 0.5rem 0 !important; } html[data-theme="dark"] .gk-no-products-title, body.dark-mode .gk-no-products-title { color: #F1EEE7 !important; } .gk-no-products-desc { font-size: 0.95rem !important; color: var(--color-text-muted, #6B7280) !important; max-width: 440px !important; margin: 0 auto 1.5rem auto !important; line-height: 1.5 !important; } html[data-theme="dark"] .gk-no-products-desc, body.dark-mode .gk-no-products-desc { color: #9CA3AF !important; } .gk-no-products-btn-group { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; } .gk-btn-no-prod-clear { background: var(--color-accent-gold, #B69A64) !important; color: #FFFFFF !important; border: none !important; padding: 0.75rem 1.6rem !important; font-size: 0.92rem !important; font-weight: 600 !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .gk-btn-no-prod-clear:hover { background: #9e8350 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(182, 154, 100, 0.3) !important; } .gk-btn-no-prod-filters { background: #F3F4F6 !important; color: #1F2937 !important; border: 1px solid #D1D5DB !important; padding: 0.75rem 1.6rem !important; font-size: 0.92rem !important; font-weight: 600 !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } html[data-theme="dark"] .gk-btn-no-prod-filters, body.dark-mode .gk-btn-no-prod-filters { background: #2D333B !important; color: #F1EEE7 !important; border-color: #3E4651 !important; } .gk-btn-no-prod-filters:hover { background: #E5E7EB !important; } html[data-theme="dark"] .gk-btn-no-prod-filters:hover, body.dark-mode .gk-btn-no-prod-filters:hover { background: #38414D !important; } @media (max-width: 767px) { .gk-no-products-container { padding: 2.25rem 1rem !important; margin: 0.75rem 0 1.5rem 0 !important; } .gk-no-products-btn-group { flex-direction: column !important; width: 100% !important; } .gk-btn-no-prod-clear, .gk-btn-no-prod-filters { width: 100% !important; justify-content: center !important; padding: 0.85rem 1rem !important; } } /* ────────────────────────────────────── * About Us Certification Badges * ────────────────────────────────────── */ .gk-about-certifications { background: transparent !important; } .gk-about-cert-item { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .gk-about-cert-item:hover { transform: translateY(-4px) !important; } .gk-about-cert-item img { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; } .gk-about-cert-item:hover img { transform: scale(1.08) !important; } html[data-theme="dark"] .gk-about-certifications span, body.dark-mode .gk-about-certifications span { color: #EDE8DF !important; } @media (max-width: 768px) { .gk-about-cert-grid { gap: 2rem !important; } } /* Accessible keyboard focus states */ :focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-accent-gold, #B69A64) !important; outline-offset: 2px !important; } /* ============================================================ CAREERS PAGE — Modern, Mobile-First Luxury Styling ============================================================ */ /* Page Wrapper */ .gk-page-careers { background: var(--color-bg-light, #FAF9F5); color: var(--color-text-dark, #0C1815); } /* 1. Hero Section */ .gk-careers-hero { position: relative; padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); text-align: center; color: #fff; background-color: #0C1815; background-size: cover; background-position: center; overflow: hidden; } .gk-careers-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 24, 21, 0.82) 0%, rgba(12, 24, 21, 0.94) 100%); z-index: 1; } .gk-careers-hero .gk-container { position: relative; z-index: 2; } .gk-careers-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(236, 234, 228, 0.75); margin-bottom: 1.25rem; } .gk-careers-breadcrumb a { color: rgba(236, 234, 228, 0.75); text-decoration: none; transition: color 0.2s ease; } .gk-careers-breadcrumb a:hover { color: var(--color-accent-gold, #CBAE78); } .gk-careers-breadcrumb .gk-sep { color: rgba(182, 154, 100, 0.6); } .gk-careers-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; background: rgba(182, 154, 100, 0.18); border: 1px solid rgba(182, 154, 100, 0.45); border-radius: 50px; color: #E8D39E; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.25rem; } .gk-careers-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #25D366; box-shadow: 0 0 8px rgba(37, 211, 102, 0.8); } .gk-careers-hero-title { color: #ffffff !important; font-family: var(--font-serif, "Playfair Display", Georgia, serif); font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; line-height: 1.2; margin: 0 auto 1.15rem; max-width: 820px; } .gk-careers-hero-subtitle { color: rgba(236, 234, 228, 0.9) !important; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; max-width: 680px; margin: 0 auto 2.25rem; } .gk-careers-hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 3rem; } .gk-careers-btn-roles { background: var(--color-accent-gold, #B69A64); color: #0C1815 !important; font-weight: 700; padding: 0.85rem 1.85rem; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; box-shadow: 0 4px 15px rgba(182, 154, 100, 0.35); } .gk-careers-btn-roles:hover { background: #D4BE8D; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(182, 154, 100, 0.5); } .gk-careers-btn-wa-hero { background: rgba(37, 211, 102, 0.15); color: #fff !important; border: 1px solid rgba(37, 211, 102, 0.5); font-weight: 700; padding: 0.85rem 1.65rem; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; backdrop-filter: blur(8px); } .gk-careers-btn-wa-hero:hover { background: #25D366; border-color: #25D366; color: #fff !important; transform: translateY(-2px); } /* Stats Counter Grid — Scoped to Careers */ .gk-careers-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: rgba(12, 24, 21, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(182, 154, 100, 0.45); border-radius: 16px; padding: 1.35rem 1.5rem; max-width: 980px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .gk-career-stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 1.15rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.25s ease; } .gk-career-stat-item:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(182, 154, 100, 0.6); transform: translateY(-2px); } .gk-career-stat-number { font-family: var(--font-serif, "Playfair Display", Georgia, serif); font-size: clamp(1.85rem, 3.2vw, 2.5rem); font-weight: 800; color: #F0CE7E !important; line-height: 1.1; display: block; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .gk-career-stat-title { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 0.85rem; color: #FFFFFF !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; line-height: 1.35; display: block; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); opacity: 1 !important; } /* 2. Why Build With Us (Perks) */ .gk-careers-why-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--color-bg-light, #FAF9F5); } .gk-section-intro { text-align: center; max-width: 680px; margin: 0 auto 3.5rem; } .gk-section-kicker { color: var(--color-accent-gold, #B69A64); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; } .gk-section-intro h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--color-primary-dark, #0C1815); font-weight: 700; line-height: 1.25; margin-bottom: 0.85rem; } .gk-section-intro p { color: #555; font-size: 1.05rem; line-height: 1.6; } .gk-career-perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .gk-perk-card { background: #ffffff; border: 1px solid #ECE7DC; border-radius: 16px; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 18px rgba(12, 24, 21, 0.03); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .gk-perk-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(182, 154, 100, 0.14); border-color: rgba(182, 154, 100, 0.45); } .gk-perk-icon-wrap { width: 52px; height: 52px; border-radius: 12px; background: rgba(182, 154, 100, 0.12); display: flex; align-items: center; justify-content: center; color: var(--color-accent-gold, #B69A64); margin-bottom: 4px; } .gk-perk-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--color-primary-dark, #0C1815); margin: 0; } .gk-perk-card p { font-size: 0.93rem; color: #666; line-height: 1.55; margin: 0; } /* 3. Open Positions Section */ .gk-careers-openings-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: #ffffff; } /* Department Filter Pills */ .gk-dept-filters { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2.5rem; } .gk-dept-filter-btn { padding: 8px 18px; border-radius: 50px; border: 1px solid #E2DDD3; background: #FAF9F5; color: #4A463D; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; user-select: none; } .gk-dept-filter-btn:hover { background: #ECE7DC; border-color: #D5CEBE; color: #0C1815; } .gk-dept-filter-btn.active { background: #0C1815; color: #ffffff; border-color: #0C1815; } /* Job Cards */ .gk-jobs-list { display: flex; flex-direction: column; gap: 20px; max-width: 980px; margin: 0 auto; } .gk-job-card { background: #ffffff; border: 1px solid #E6E1D5; border-radius: 18px; padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: 0 4px 20px rgba(12, 24, 21, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .gk-job-card:hover { border-color: var(--color-accent-gold, #B69A64); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(12, 24, 21, 0.08); } .gk-job-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .gk-job-dept-pill { display: inline-block; padding: 4px 12px; background: rgba(182, 154, 100, 0.12); border: 1px solid rgba(182, 154, 100, 0.3); border-radius: 50px; color: #8C7238; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .gk-job-title { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 700; color: var(--color-primary-dark, #0C1815); margin: 0; line-height: 1.3; } .gk-job-type-pill { padding: 5px 14px; border-radius: 50px; background: #F4F1EA; border: 1px solid #E2DCCF; font-size: 0.8rem; font-weight: 700; color: #4A463D; white-space: nowrap; } .gk-job-meta-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 1.15rem 0 1.25rem; } .gk-job-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #FAF8F4; border: 1px solid #EAE6DD; border-radius: 8px; font-size: 0.85rem; color: #4A463D; font-weight: 500; } .gk-job-chip svg { color: var(--color-accent-gold, #B69A64); flex-shrink: 0; } .gk-job-desc { color: #555; font-size: 0.98rem; line-height: 1.65; margin-bottom: 1.5rem; } .gk-job-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid #ECE7DD; } .gk-btn-apply-job { background: #0C1815; color: #ffffff; border: 1px solid #0C1815; border-radius: 8px; padding: 0.75rem 1.6rem; font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .gk-btn-apply-job:hover { background: var(--color-accent-gold, #B69A64); border-color: var(--color-accent-gold, #B69A64); color: #0C1815; } .gk-btn-job-wa { background: rgba(37, 211, 102, 0.1); color: #128C7E !important; border: 1px solid rgba(37, 211, 102, 0.35); border-radius: 8px; padding: 0.75rem 1.4rem; font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.2s ease; } .gk-btn-job-wa:hover { background: #25D366; border-color: #25D366; color: #ffffff !important; } /* 4. Application Form Section */ .gk-careers-form-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--color-bg-light, #FAF9F5); border-top: 1px solid #ECE7DD; } .gk-career-form-wrapper { max-width: 860px; margin: 0 auto; background: #ffffff; border: 1px solid #E2DDD2; border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 10px 35px rgba(12, 24, 21, 0.05); } .gk-career-form-header { text-align: center; margin-bottom: 2.25rem; } .gk-career-form-header h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--color-primary-dark, #0C1815); font-weight: 700; margin: 0.35rem 0 0.65rem; } .gk-career-form-header p { color: #666; font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.55; } .gk-careers-form-grid { display: flex; flex-direction: column; gap: 1.25rem; } .gk-careers-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .gk-field-group { display: flex; flex-direction: column; gap: 6px; } .gk-field-group label { font-size: 0.88rem; font-weight: 600; color: #222; } .gk-field-group input, .gk-field-group select, .gk-field-group textarea { width: 100%; min-height: 48px; border: 1px solid #D5CEBF; border-radius: 8px; padding: 10px 14px; font-size: 16px; background: #FAF9F6; color: #111; font-family: inherit; transition: all 0.2s ease; box-sizing: border-box; } .gk-field-group textarea { min-height: 110px; resize: vertical; } .gk-field-group input:focus, .gk-field-group select:focus, .gk-field-group textarea:focus { border-color: var(--color-accent-gold, #B69A64) !important; background: #ffffff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(182, 154, 100, 0.2) !important; } .gk-career-submit-btn { width: 100%; min-height: 52px; background: #0C1815; color: #ffffff; border: 1px solid #0C1815; border-radius: 8px; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all 0.25s ease; margin-top: 0.5rem; } .gk-career-submit-btn:hover { background: var(--color-accent-gold, #B69A64); border-color: var(--color-accent-gold, #B69A64); color: #0C1815; } /* 5. Direct Reach Out Strip */ .gk-career-direct-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 2.75rem; } .gk-direct-card { background: #ffffff; border: 1px solid #E5E1D6; border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 14px; box-shadow: 0 4px 16px rgba(12, 24, 21, 0.03); } .gk-direct-card-info { display: flex; align-items: center; gap: 12px; } .gk-direct-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gk-direct-icon-mail { background: #0C1815; color: var(--color-accent-gold, #B69A64); } .gk-direct-icon-wa { background: #25D366; color: #fff; } .gk-direct-text strong { display: block; font-size: 0.95rem; color: #0C1815; line-height: 1.3; } .gk-direct-text span, .gk-direct-text a { font-size: 0.88rem; color: #666; text-decoration: none; } .gk-btn-direct-card { background: #0C1815; color: #fff !important; padding: 0.65rem 1.15rem; border-radius: 6px; font-size: 0.86rem; font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .gk-btn-direct-card:hover { background: var(--color-accent-gold, #B69A64); color: #0C1815 !important; } .gk-btn-direct-wa { background: #25D366; } .gk-btn-direct-wa:hover { background: #1EBE5D; color: #fff !important; } /* ============================================================ CAREERS PAGE — Mobile & Responsive Breakpoints ============================================================ */ @media (max-width: 991px) { .gk-career-perks-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .gk-careers-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 1.25rem; } } @media (max-width: 768px) { .gk-careers-row-2col { grid-template-columns: 1fr; gap: 14px; } .gk-career-direct-strip { grid-template-columns: 1fr; } .gk-direct-card { flex-direction: column; align-items: flex-start; gap: 16px; } .gk-direct-card .gk-btn-direct-card { width: 100%; justify-content: center; padding: 0.75rem 1.2rem; } .gk-job-header { flex-direction: column; align-items: flex-start; gap: 8px; } .gk-job-actions { flex-direction: column; align-items: stretch; } .gk-btn-apply-job, .gk-btn-job-wa { width: 100%; justify-content: center; text-align: center; } } @media (max-width: 575px) { .gk-career-perks-grid { grid-template-columns: 1fr; } .gk-careers-stats-grid { grid-template-columns: 1fr 1fr; padding: 1rem 0.75rem; gap: 10px; } .gk-career-stat-number { font-size: 1.6rem; } .gk-career-stat-title { font-size: 0.75rem; } .gk-careers-hero-actions { flex-direction: column; width: 100%; } .gk-careers-btn-roles, .gk-careers-btn-wa-hero { width: 100%; justify-content: center; text-align: center; } .gk-job-meta-chips { gap: 6px; } .gk-job-chip { width: 100%; padding: 6px 10px; } .gk-dept-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .gk-dept-filter-btn { flex-shrink: 0; } } /* ============================================================ CAREERS PAGE — Dark Mode Support ============================================================ */ html[data-theme="dark"] .gk-page-careers { background: var(--color-bg-light, #171613); color: var(--color-text-dark, #F1EEE7); } html[data-theme="dark"] .gk-careers-why-section, html[data-theme="dark"] .gk-careers-form-section { background: var(--color-bg-light, #171613) !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-careers-openings-section { background: var(--color-bg-card, #232019) !important; } html[data-theme="dark"] .gk-section-intro h2, html[data-theme="dark"] .gk-job-title, html[data-theme="dark"] .gk-career-form-header h2, html[data-theme="dark"] .gk-direct-text strong { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-section-intro p, html[data-theme="dark"] .gk-perk-card p, html[data-theme="dark"] .gk-job-desc, html[data-theme="dark"] .gk-career-form-header p, html[data-theme="dark"] .gk-direct-text span { color: var(--color-text-muted, #C9C4B8) !important; } html[data-theme="dark"] .gk-careers-stats-grid { background: rgba(18, 17, 14, 0.92) !important; border-color: rgba(203, 174, 120, 0.5) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .gk-career-stat-item { background: rgba(35, 32, 25, 0.9) !important; border: 1px solid rgba(203, 174, 120, 0.3) !important; } html[data-theme="dark"] .gk-career-stat-item:hover { background: rgba(45, 41, 32, 0.95) !important; border-color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .gk-career-stat-number { color: #F5D78E !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important; } html[data-theme="dark"] .gk-career-stat-title { color: #FFFFFF !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important; } html[data-theme="dark"] .gk-perk-card, html[data-theme="dark"] .gk-job-card, html[data-theme="dark"] .gk-career-form-wrapper, html[data-theme="dark"] .gk-direct-card { background: var(--color-bg-card, #232019) !important; border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-perk-card h3 { color: var(--color-accent-gold, #CBAE78) !important; } html[data-theme="dark"] .gk-dept-filter-btn { background: #171613; border-color: #3A362D; color: #C9C4B8; } html[data-theme="dark"] .gk-dept-filter-btn.active { background: var(--color-accent-gold, #B69A64); color: #0C1815; border-color: var(--color-accent-gold, #B69A64); } html[data-theme="dark"] .gk-job-chip { background: #171613 !important; border-color: #3A362D !important; color: #C9C4B8 !important; } html[data-theme="dark"] .gk-job-type-pill { background: rgba(182, 154, 100, 0.15) !important; border-color: rgba(182, 154, 100, 0.3) !important; color: #F1EEE7 !important; } html[data-theme="dark"] .gk-job-actions { border-color: var(--color-border, #3A362D) !important; } html[data-theme="dark"] .gk-btn-apply-job { background: var(--color-accent-gold, #B69A64); border-color: var(--color-accent-gold, #B69A64); color: #0C1815; } html[data-theme="dark"] .gk-field-group label { color: var(--color-text-dark, #F1EEE7) !important; } html[data-theme="dark"] .gk-field-group input, html[data-theme="dark"] .gk-field-group select, html[data-theme="dark"] .gk-field-group textarea { background: #171613 !important; border-color: #3A362D !important; color: #F1EEE7 !important; } html[data-theme="dark"] .gk-career-submit-btn { background: var(--color-accent-gold, #B69A64); border-color: var(--color-accent-gold, #B69A64); color: #0C1815; } html[data-theme="dark"] .gk-btn-direct-card { background: #3A362D; color: #fff !important; } html[data-theme="dark"] .gk-btn-direct-card:hover { background: var(--color-accent-gold, #B69A64); color: #0C1815 !important; }