/*
Theme Name: GroKarna
Theme URI: https://grokarna.com
Author: GroKarna Team
Author URI: https://grokarna.com
Description: A WooCommerce theme for GroKarna Organic Store
Version: 1.0.0
License: GPL v2 or later
Text Domain: grokarna
*/
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--brand-green: #2d6e3e;
--brand-orange: #f05c0c;
--brand-gray: #6b7280;
--brand-light: #f8f9fa;
--brand-border: #e5e7eb;
--text-dark: #111827;
--text-gray: #6b7280;
--text-light: #9ca3af;
--bg-light: #f9fafb;
--bg-gray: #f3f4f6;
--border-light: #e5e7eb;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--grok-side-padding: 35px;
/* Desktop padding */
}
/* Global box-sizing */
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text-dark);
background-color: #ffffff;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Quicksand', sans-serif;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
a {
color: var(--brand-green);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #256c3b;
}
/* Full-width sections with inner containers: no extra side padding on wrappers */
.header-top,
.header-main,
.main-navigation,
.hero-next,
.category-section,
.promotional-banners,
.featured-products,
.product-section,
.newsletter-section,
.testimonials-section {
width: 100%;
margin: 0;
padding-left: 0;
padding-right: 0;
}
.category-section,
.promotional-banners,
.featured-products {
width: 100%;
margin: 0;
padding-left: 0;
padding-right: 0;
}
/* Ensure consistent container behavior — NO GUTTERS, FULL-BLEED */
.container {
width: 100%;
max-width: 100%;
margin: 0;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
/* Hero container uses the same sizing so all sections align */
.hero-container {
width: 100%;
max-width: 100%;
margin: 0;
padding-left: 0;
padding-right: 0;
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* ... existing code ... */
/* Removed global force-full width overrides so header and sections align.
Optional: If you want to enforce a maximum width for readability, use the example below.
.container,
.hero-container {
max-width: 1920px;
margin: 0 auto;
}
*/
/* Optional: If you want some max-width for readability, use this instead:
.container,
.hero-container {
max-width: 1920px;
margin: 0 auto;
}
*/
/* ... existing code ... */
/* Header Styles */
.site-header {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
/* Remove sticky from main header */
z-index: 1000;
}
/* Site wrapper and main content full width */
#page {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.site-main {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* ... existing code ... */
/* Ensure all sections extend full width */
section,
.hero-section,
.hero-next,
.category-section,
.promotional-banners,
.featured-products,
.product-section,
.newsletter-section,
.testimonials-section {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Page content full width */
.page-content {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* Removed aggressive global overrides so sections can retain theme spacing.
If you need a section to be full-width with no side padding, add the
.full-width-section utility class to that section. */
/* Utility: opt-in full-width section (use only where needed) */
.full-width-section {
margin: 0;
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 100%;
}
/* Keep hero-box styling gentle — avoid forcing removal of margins globally.
Adjust on a case-by-case basis instead of a blanket reset. */
.hero-container .hero-box {
margin: 0 auto;
/* center the hero box; preserve vertical spacing */
}
/* ... existing code ... */
/* Header Styles */
/* ... existing code ... */
.site-header {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
/* Remove sticky from main header */
z-index: 1000;
}
/* Top Bar */
/* Top Bar */
.header-top {
background: #ff7a00;
/* orange */
padding: 2px 0;
color: white;
font-size: 12px;
line-height: 1;
}
.header-top-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
}
.header-top .promo-text {
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
}
.header-top .promo-text strong {
background: #ffffff;
color: #ff7a00;
/* orange */
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
font-size: 11px;
margin-left: 4px;
}
.header-top-right {
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
}
.header-top-right a {
color: white;
text-decoration: none;
font-weight: 400;
}
.header-top-right a:hover {
color: #ffd700;
}
.header-main {
padding: 4px 0;
border-bottom: 1px solid #e5e7eb;
}
.header-main .container.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding-top: 8px;
padding-bottom: 8px;
}
.site-logo {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
margin-left: 72px; /* Shifted right so the logo is fully visible */
}
.header-search {
flex: 1;
max-width: 480px;
}
.header-actions {
flex-shrink: 0;
}
.logo-box {
width: 220px;
height: 72px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.site-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.site-logo .tagline.tagline-large {
font-size: 12px;
color: #6b7280;
font-weight: 600;
margin-top: -6px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
display: block;
width: 100%;
text-align: center;
}
.search-form-modern {
position: relative;
}
.search-form-modern .search-input {
width: 100%;
padding: 10px 44px 10px 14px;
border: 2px solid #e5e7eb;
background: #f9fafb;
font-size: 16px;
border-radius: 10px;
transition: all .2s ease;
}
.search-form-modern .search-input:focus {
outline: none;
background: #fff;
border-color: #ff7a00;
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.18);
}
.search-form-modern .search-submit {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: #ff7a00;
color: #fff;
border: 0;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.search-form-modern .search-submit svg {
stroke: currentColor;
width: 18px;
height: 18px;
}
.search-form-modern .search-submit:hover {
background: #e66c00;
}
.search-form-modern .search-submit:active {
transform: translateY(-50%) scale(0.98);
}
.action-ghost {
background: transparent;
border-radius: 10px;
}
.action-link {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-dark);
text-decoration: none;
padding: 6px 10px;
border-radius: 10px;
transition: all 0.2s;
font-size: 16px;
font-weight: 500;
position: relative;
}
/* Hero Next.js-like */
.hero-next {
padding: 16px 0;
background: #f9fafb;
width: 100%;
margin: 0;
}
.hero-container {
max-width: 100%;
/* Changed to 100% for full width */
margin: 0;
padding: 0 20px;
/* Keep padding for proper spacing */
}
.hero-box {
position: relative;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
background: #0d1d17;
height: clamp(360px, 55vw, 520px);
min-height: 380px;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
transition: opacity .6s ease;
}
.hero-slide.active {
opacity: 1;
z-index: 2;
}
.hero-slide picture,
.hero-slide img,
.hero-slide-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
/* Ensure rounded corners on images */
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .2);
}
.hero-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
}
.hero-text-wrap {
padding: 0 48px;
max-width: 720px;
}
.hero-title {
font-size: 40px;
font-weight: 900;
color: #fff;
line-height: 1.15;
text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.hero-title span {
display: block;
color: #fff;
}
.hero-desc {
margin-top: 12px;
font-size: 18px;
color: #fff;
text-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.btn-hero {
display: inline-block;
margin-top: 16px;
background: #f97316;
color: #fff;
padding: 12px 28px;
border-radius: 9999px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, .2);
box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.btn-hero:hover {
background: #ea580c;
color: #ffffff;
}
.hero-dots {
position: absolute;
bottom: clamp(18px, 2.8vw, 38px);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
padding: 6px 16px;
border-radius: 999px;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(8px);
z-index: 5;
}
.hero-dot {
width: 12px;
height: 12px;
border-radius: 9999px;
background: rgba(0, 0, 0, .5);
}
.hero-dot.active {
background: #111827;
transform: scale(1.1);
}
.accent {
color: #fde047;
font-weight: 700;
}
/* Features Banner Next.js-like */
.features-next {
background: var(--brand-green);
color: #fff;
padding: 64px 0;
}
.features-heading {
text-align: center;
margin-bottom: 32px;
}
.features-heading h2 {
color: #fff;
font-size: 32px;
margin-bottom: 8px;
}
.features-heading p {
color: #bbf7d0;
font-size: 18px;
}
.features-grid-center {
grid-template-columns: repeat(4, 1fr);
}
.feature-center {
flex-direction: column;
text-align: center;
}
.feature-bubble {
width: 80px;
height: 80px;
border-radius: 9999px;
background: rgba(255, 255, 255, .12);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin: 0 auto 12px;
}
.features-dots {
text-align: center;
margin-top: 24px;
display: inline-flex;
gap: 24px;
justify-content: center;
width: 100%;
color: #bbf7d0;
}
.features-dots span::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #fff;
border-radius: 9999px;
margin-right: 8px;
}
/* Button styling matching Next.js */
/* Duplicate btn-banner block removed; canonical styles are defined later in the file */
/* Search suggestions container and styling */
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-height: 450px;
overflow-y: auto;
z-index: 999;
margin-top: -1px;
}
.search-suggestions.hidden {
display: none;
}
.search-suggestions .extra {
font-size: 12px;
color: #6b7280;
display: flex;
gap: 8px;
margin-top: 4px;
}
.search-suggestions .stock.ok {
color: #16a34a;
font-weight: 700;
}
.search-suggestions .stock.no {
color: #dc2626;
font-weight: 700;
}
.search-suggestions .sku {
color: #6b7280;
}
/* === DISABLED: DUPLICATE SEARCH DROPDOWN STYLES === */
/* These styles were for the old .search-dropdown system which has been disabled */
/* The active search system uses .search-suggestions (see styles below) */
/* Keeping the basic positioning for .search-form-modern */
.search-form-modern {
position: relative;
z-index: 1000;
}
/* Simplified scrollbar styling for better compatibility */
/* Existing styles below ... */
/* Header Actions */
.header-actions {
display: flex;
gap: 20px;
align-items: center;
flex-shrink: 0;
}
/* Navigation */
.main-navigation {
background: white;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
padding: 0;
border-top: 1px solid #e5e7eb;
}
.main-navigation .container {
position: relative;
display: flex;
align-items: center;
height: 44px;
/* slightly reduced for tighter nav */
}
/* Browse Categories Button */
.browse-categories-btn {
background: #ff7a00;
/* orange */
color: white;
padding: 6px 12px;
/* Reduced padding for tighter spacing */
border-radius: 8px;
font-weight: 600;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Center content horizontally */
gap: 6px;
/* Reduced gap */
transition: all 0.2s;
border: none;
cursor: pointer;
margin-right: 16px;
line-height: 1;
/* Tighter line height */
height: 32px;
/* Slightly smaller fixed height */
}
.browse-categories-btn:hover {
background: #e66c00;
/* darker orange on hover */
transform: translateY(-1px);
}
.browse-categories-btn svg {
width: 16px;
/* Slightly smaller icon */
height: 16px;
flex-shrink: 0;
/* Prevent icon from shrinking */
margin-top: 0;
/* Reset any upward shift */
stroke: currentColor;
}
/* Slightly lower the hamburger icon to align with text baseline */
.main-navigation .nav-menu li:first-child .browse-categories-btn svg {
position: static;
/* reset positioning */
top: auto;
/* reset top offset */
margin-top: 0;
/* ensure no conflicting margin */
}
/* Hamburger icon (3 lines) specific styling */
.browse-categories-btn .hamburger-icon,
.browse-categories-btn svg.hamburger-icon,
.browse-categories-btn [class*="hamburger"],
.browse-categories-btn [class*="menu-icon"] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
}
/* If the hamburger is made with spans/divs */
.browse-categories-btn .hamburger-icon span,
.browse-categories-btn .hamburger-icon div {
display: block;
width: 100%;
height: 2px;
background-color: currentColor;
margin: 2px 0;
transition: all 0.2s;
}
/* Navigation Menu */
.main-navigation .nav-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
align-items: center;
gap: 0;
height: 100%;
}
.main-navigation li {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.main-navigation a {
font-size: 14px;
color: #000;
/* force black */
padding: 0 16px;
display: flex;
align-items: center;
height: 100%;
font-weight: 500;
transition: all 0.2s;
text-decoration: none;
}
.main-navigation a:hover {
color: var(--brand-green);
background: #f9fafb;
}
.main-navigation a:hover {
color: var(--brand-green);
background: #f9fafb;
}
.location-selector {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
text-decoration: none;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.3s;
}
.location-selector:hover {
background: #f5f5f5;
color: var(--brand-orange);
}
.location-selector svg {
color: var(--brand-orange);
}
.location-selector div {
display: flex;
flex-direction: column;
}
.location-selector .label {
font-size: 12px;
color: #666;
}
.location-selector .value {
font-size: 14px;
font-weight: 600;
}
/* Navigation */
.main-navigation {
background: white;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
padding: 0;
border-top: 1px solid #e5e7eb;
}
.main-navigation .container {
position: relative;
}
.main-navigation .nav-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
align-items: center;
gap: 0;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
font-size: 16px;
color: #000;
/* force black */
padding: 16px 24px;
display: block;
font-weight: 500;
transition: all 0.2s;
}
.main-navigation a:hover {
color: var(--brand-green);
background: #f9fafb;
}
/* Category Tabs Styling */
.category-tabs-container {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: relative;
}
.category-tabs {
display: flex;
gap: 8px;
padding: 16px 0;
border-bottom: 2px solid transparent;
}
.category-tab {
padding: 8px 24px;
font-size: 16px;
font-weight: 600;
color: #6b7280;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.category-tab:hover {
background: #f3f4f6;
color: #111827;
}
.category-tab.active {
background: #ff7a00;
/* orange */
color: #ffffff;
}
.category-content {
padding: 24px 0;
}
/* ==========================
Top Categories (Fixed)
========================== */
.category-section {
position: relative;
padding: 48px 0;
background: #ffffff;
z-index: 0;
}
.category-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 122, 0, 0.06) 0%, rgba(255, 122, 0, 0.0) 40%, #ffffff 100%);
pointer-events: none;
z-index: 0;
}
.category-section .section-header,
.category-section .category-scroll-wrapper,
.category-section .category-grid {
position: relative;
z-index: 1;
}
.category-section .section-header {
margin-bottom: 24px;
text-align: left;
}
.category-section .section-header h2 {
font-size: 28px;
font-weight: 700;
color: #000;
margin-bottom: 8px;
}
.category-section .section-header p {
font-size: 16px;
color: #000;
font-weight: 400;
max-width: 600px;
margin: 0;
}
/* Horizontal Scrolling Container */
.category-scroll-wrapper {
position: relative;
margin: 0 auto;
max-width: 100%;
}
.category-scroll-container {
display: flex;
gap: 20px;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
scroll-behavior: smooth;
padding: 10px 20px 20px 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #cfcfcf #f4f4f4;
overscroll-behavior-x: contain;
scrollbar-gutter: stable both-edges;
position: relative;
z-index: 2;
}
.category-scroll-container::-webkit-scrollbar {
height: 6px;
display: block;
}
.category-scroll-container::-webkit-scrollbar-track {
background: #f4f4f4;
border-radius: 4px;
}
.category-scroll-container::-webkit-scrollbar-thumb {
background: #cfcfcf;
border-radius: 4px;
}
.category-scroll-container::-webkit-scrollbar-thumb:hover {
background: #bdbdbd;
}
/* Category Cards */
.category-card {
flex-shrink: 0;
min-width: 160px;
/* Increased to accommodate larger icons */
max-width: 180px;
/* Increased to accommodate larger icons */
text-align: center;
padding: 16px 12px;
/* Increased padding */
border-radius: 14px;
transition: all 0.2s ease;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
/* Slightly increased gap */
background: rgba(255, 255, 255, 0.8);
border: 1px solid #e5e7eb;
}
.category-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Type-specific hover tints */
.category-card.organic:hover {
background: #fff7ed;
/* orange tint */
border-color: rgba(234, 88, 12, 0.35);
}
.category-card.essentials:hover {
background: #fff7ed;
/* orange tint */
border-color: rgba(234, 88, 12, 0.35);
}
/* Category Media */
.category-media {
width: 120px;
/* Increased from 80px by 50% */
height: 120px;
/* Increased from 80px by 50% */
background: #fff7ed;
/* orange light base */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Removed overflow: hidden to allow image to overlap on zoom */
transition: all 0.2s ease;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
border: 1px solid #ffedd5;
/* orange-100 */
}
.category-media img {
width: 84px;
/* Increased from 56px by 50% */
height: 84px;
/* Increased from 56px by 50% */
object-fit: contain;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
/* Add hover effect for images to zoom and overlap */
.category-card:hover .category-media img {
transform: scale(1.3);
}
/* Media color by type */
.category-card.organic .category-media {
background: #fff7ed;
/* orange-50 */
border-color: #ffedd5;
/* orange-100 */
}
.category-card.essentials .category-media {
background: #fff7ed;
/* orange-50 */
border-color: #ffedd5;
/* orange-100 */
}
.category-card:hover .category-media {
transform: scale(1.05);
}
.category-media img {
width: 84px;
/* Increased from 56px by 50% */
height: 84px;
/* Increased from 56px by 50% */
object-fit: contain;
}
/* Category Info */
.category-info {
width: 100%;
}
.category-title {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 0 0 2px 0;
transition: color 0.2s ease;
white-space: nowrap;
line-height: 1.2;
}
.category-card:hover .category-title {
color: #111827;
}
.category-card.organic:hover .category-title {
color: #15803d;
}
.category-card.essentials:hover .category-title {
color: #c2410c;
}
.category-count {
font-size: 12px;
color: #9ca3af;
margin: 0;
white-space: nowrap;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
.category-scroll-container {
padding: 8px 16px;
/* Reduced padding for mobile */
gap: 6px;
/* Even tighter spacing on mobile */
}
.category-arrow {
width: 32px;
height: 32px;
}
.category-arrow {
width: 32px;
height: 32px;
}
.category-arrow.left {
left: 0;
transform: translateY(-50%) translateX(-50%);
}
.category-arrow.right {
right: 0;
transform: translateY(-50%) translateX(50%);
}
.category-arrow svg {
width: 14px;
height: 14px;
}
.category-card {
min-width: 140px;
/* Increased to accommodate larger icons */
max-width: 160px;
/* Increased to accommodate larger icons */
padding: 12px 8px;
/* Increased padding */
}
.category-media {
width: 84px;
/* Increased from 56px by 50% */
height: 84px;
/* Increased from 56px by 50% */
}
.category-media img {
width: 54px;
/* Increased from 36px by 50% */
height: 54px;
/* Increased from 36px by 50% */
}
.category-title {
font-size: 12px;
}
.category-count {
font-size: 10px;
}
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.category-card.organic::before {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.1) 100%);
}
.category-card.essentials::before {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.05) 0%, rgba(251, 146, 60, 0.1) 100%);
}
.category-card:hover::before {
opacity: 1;
}
/* Active state for categories */
.category-card.active {
background: #ffffff;
border-color: #ea580c;
/* orange */
box-shadow: 0 6px 16px rgba(234, 88, 12, 0.15);
}
.category-card.active .category-title {
color: #c2410c;
/* orange-700 */
}
/* === Exact category hover card like provided screenshots === */
/* Base card */
.category-card {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 16px 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* Remove colored backplate; image floats on white */
.category-card .category-media {
width: auto;
height: auto;
background: transparent;
border: 0;
box-shadow: none;
}
.category-card .category-media img {
width: 72px;
height: 72px;
object-fit: contain;
filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.08));
transition: transform 0.2s ease;
}
/* === Bounce fix: stronger zoom (2.25x) and reliable trigger === */
/* Reset non-hover state so animation re-triggers cleanly */
.category-card .category-media img {
animation: none;
transform: translateY(0) scale(1);
transform-origin: center center;
will-change: transform;
}
@keyframes catIconBounceGentle {
0% {
transform: translateY(0) scale(1);
}
60% {
transform: translateY(-4px) scale(1.58);
}
80% {
transform: translateY(-2px) scale(1.46);
}
100% {
transform: translateY(-2px) scale(1.5);
}
}
.category-card:hover .category-media img,
.category-card .category-media:hover img,
.category-card:focus-within .category-media img {
animation: catIconBounceGentle 220ms cubic-bezier(.34, 1.56, .64, 1);
transform: translateY(-2px) scale(1.5) !important;
}
/* === BOLDER: category icon zoom 2.0x with visible bounce === */
@keyframes catIconBounceStrong {
0% {
transform: translateY(0) scale(1);
}
60% {
transform: translateY(-6px) scale(2.1);
}
80% {
transform: translateY(-3px) scale(1.9);
}
100% {
transform: translateY(-4px) scale(2.0);
}
}
.category-card:hover .category-media img,
.category-card .category-media:hover img,
.category-card:focus-within .category-media img {
animation: catIconBounceStrong 260ms cubic-bezier(.34, 1.56, .64, 1);
transform: translateY(-4px) scale(2.0) !important;
}
/* === Bounce fix: stronger zoom (2.25x) and reliable trigger === */
/* Reset non-hover state so animation re-triggers cleanly */
.category-card .category-media img {
animation: none;
transform: translateY(0) scale(1);
transform-origin: center center;
will-change: transform;
}
@keyframes catIconBounceXL {
0% {
transform: translateY(0) scale(1);
}
60% {
transform: translateY(-8px) scale(2.35);
}
80% {
transform: translateY(-4px) scale(2.2);
}
100% {
transform: translateY(-5px) scale(2.25);
}
}
/* Apply animation on card/icon hover; persist end state while hovered */
.category-card:hover .category-media img,
.category-card .category-media:hover img,
.category-card:focus-within .category-media img {
animation: catIconBounceXL 300ms cubic-bezier(.34, 1.56, .64, 1) 1 both;
}
/* --- Override: increase hover zoom by an additional 50% on category icons --- */
@keyframes catIconBounceXXL {
0% {
transform: translateY(0) scale(1);
}
60% {
transform: translateY(-10px) scale(3.525);
}
80% {
transform: translateY(-6px) scale(3.3);
}
100% {
transform: translateY(-8px) scale(3.375);
}
}
/* Apply stronger zoom while hovered/focused; keep the end state while hovered */
.category-card:hover .category-media img,
.category-card .category-media:hover img,
.category-card:focus-within .category-media img {
animation: catIconBounceXXL 360ms cubic-bezier(.34, 1.56, .64, 1) 1 both !important;
transform: translateY(-8px) scale(3.375) !important;
}
/* Optional: tame the effect on small screens to avoid excessive clipping */
@media (max-width: 768px) {
.category-card:hover .category-media img,
.category-card .category-media:hover img,
.category-card:focus-within .category-media img {
animation: catIconBounceXL 300ms cubic-bezier(.34, 1.56, .64, 1) 1 both !important;
transform: translateY(-5px) scale(2.25) !important;
}
}
/* Title and count */
.category-card .category-title {
font-size: 15px;
font-weight: 700;
color: #111827;
}
.category-card .category-count {
font-size: 13px;
color: #6b7280;
}
/* Corner dots: hidden by default */
.category-card::before,
.category-card::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Positions */
.category-card::before {
top: 10px;
left: 10px;
}
.category-card::after {
bottom: 10px;
right: 10px;
}
/* Hover states by type: ORGANIC -> green, ESSENTIALS -> orange */
.category-card.organic:hover {
border-color: rgba(34, 197, 94, 0.35);
background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.02) 100%);
box-shadow: 0 10px 28px rgba(34, 197, 94, 0.18);
}
.category-card.organic:hover .category-title,
.category-card.organic:hover .category-count {
color: #16a34a;
}
.category-card.organic:hover::before,
.category-card.organic:hover::after {
background: #22c55e;
opacity: 1;
transform: scale(1);
}
.category-card.essentials:hover {
border-color: rgba(234, 88, 12, 0.35);
background: linear-gradient(180deg, rgba(234, 88, 12, 0.06) 0%, rgba(234, 88, 12, 0.02) 100%);
box-shadow: 0 10px 28px rgba(234, 88, 12, 0.18);
}
.category-card.essentials:hover .category-title,
.category-card.essentials:hover .category-count {
color: #ea580c;
}
.category-card.essentials:hover::before,
.category-card.essentials:hover::after {
background: #ea580c;
opacity: 1;
transform: scale(1);
}
/* Keep card steady; allow icon animation */
.category-card:hover {
transform: none !important;
}
.category-card:hover .category-media {
transform: none !important;
}
/* icon animation handled later */
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-header h2 {
font-size: 36px;
font-weight: 700;
color: #1f2937;
margin-bottom: 16px;
line-height: 1.2;
}
.section-header p {
font-size: 18px;
color: #6b7280;
max-width: 600px;
margin: 0 auto;
}
/* Utility Classes */
.text-center {
text-align: center;
}
.bg-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Featured Products Section */
.featured-products {
margin-top: 40px;
}
.featured-products .section-header-split h2 {
font-size: 28px;
line-height: 1.2;
}
.featured-products .section-header-split p {
color: var(--text-gray);
font-size: 14px;
}
/* Tabs (right side) */
.category-tabs-container.product-tabs {
gap: 10px;
}
.category-tabs-container.product-tabs .tab {
appearance: none;
border: 1px solid var(--border-light);
background: var(--bg-light);
color: var(--text-dark);
padding: 8px 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
}
.category-tabs-container.product-tabs .tab:hover {
border-color: var(--brand-orange);
color: var(--brand-orange);
}
.category-tabs-container.product-tabs .tab.active {
background: var(--brand-orange);
border-color: var(--brand-orange);
color: #fff;
}
/* Grid and product card sizing */
.featured-products .product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1200px) {
.featured-products .product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.featured-products .product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.featured-products .product-grid {
grid-template-columns: 1fr;
}
}
.featured-products .product-card {
position: relative;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .18s ease, box-shadow .18s ease;
}
.featured-products .product-card:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
/* Image: fixed square ratio like Next.js product tiles */
.featured-products .product-card .product-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
}
.featured-products .product-card .product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.0);
transition: transform .25s ease;
}
.featured-products .product-card:hover .product-image img {
transform: scale(1.03);
}
/* Badges */
.featured-products .product-card .product-badges {
position: absolute;
left: 10px;
top: 10px;
display: flex;
gap: 6px;
z-index: 2;
}
.featured-products .product-card .badge {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 6px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #0b5e37;
background: #e6f5ec;
border: 1px solid #cde9d9;
}
.featured-products .product-card .badge-off {
color: #8a2c0a;
background: #fff3eb;
border-color: #ffd8bf;
}
/* Product info typography */
.featured-products .product-card .product-info {
padding: 12px 12px 58px;
/* leave space for hover controls */
}
.featured-products .product-card .product-title {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
margin: 2px 0 6px;
text-align: left;
}
.featured-products .product-card .product-meta-row {
display: flex;
gap: 8px;
color: var(--text-gray);
font-size: 12px;
}
/* Prices */
.featured-products .product-card .product-price {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.featured-products .product-card .price-regular {
font-size: 19px;
font-weight: 700;
color: #2d6e3e;
}
.featured-products .product-card .price-member {
font-size: 16px;
font-weight: 700;
color: var(--brand-green);
}
.featured-products .product-card .price-member small,
.featured-products .product-card .price-member span {
font-weight: 600;
}
/* Hover controls box (variations + add button) */
.featured-products .product-card .product-controls {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 8px 10px;
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: all .18s ease;
}
.featured-products .product-card:hover .product-controls {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.featured-products .product-card .product-variant {
appearance: none;
border: 1px solid var(--border-light);
background: var(--bg-light);
color: var(--text-dark);
padding: 6px 30px 6px 10px;
border-radius: 10px;
font-size: 13px;
}
.featured-products .product-card .controls-spacer {
flex: 1;
}
.featured-products .product-card .add-to-cart.compact {
background: var(--brand-orange);
color: #fff;
border: 0;
padding: 8px 12px;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
.featured-products .product-card .add-to-cart.compact:hover {
background: #e66c00;
}
.featured-products .product-card .add-to-cart.compact:active {
transform: translateY(1px);
}
/* PDP member price box */
.member-price-display {
display: none;
/* toggled by JS */
margin-top: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #cde9d9;
background: #e6f5ec;
color: #0b5e37;
font-weight: 700;
box-shadow: var(--shadow-sm);
}
.member-price-display .member-price-label {
margin-right: 6px;
font-size: 14px;
font-weight: 700;
color: #0b5e37;
}
.member-price-display .member-price-amount {
font-size: 16px;
font-weight: 800;
color: var(--brand-green);
}
/* PDP variation selects and add-to-cart button */
.single-product form.variations_form select,
.single-product .variations select {
appearance: none;
border: 2px solid var(--border-light);
border-radius: 12px;
padding: 10px 14px;
background: #fff;
font-size: 15px;
color: #111827;
}
.single-product .single_add_to_cart_button {
background: var(--brand-orange) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-weight: 800 !important;
}
.single-product .single_add_to_cart_button:hover {
/* Hover color change removed as per user request */
cursor: pointer;
}
.featured-products {
padding: 64px 0;
background: #f9fafb;
font-size: 0.9em;
color: #444;
}
.featured-products .section-header {
margin-bottom: 48px;
}
.featured-products .section-header h2 {
font-size: 48px;
color: #111827;
margin-bottom: 16px;
font-weight: 700;
line-height: 1.1;
font-family: 'Quicksand', sans-serif;
}
.featured-products .section-header p {
font-size: 20px;
color: #6b7280;
font-weight: 400;
line-height: 1.5;
}
/* Product Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.product-grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
}
/* Product Card */
/* Updated Product Card with 5-line layout */
.product-card {
border-radius: 18px;
background: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
transition: box-shadow .25s ease, transform .25s ease;
position: relative;
display: flex;
flex-direction: column;
overflow: visible;
padding: 0;
}
.product-card:hover {
/* transform: translateY(-4px); - REMOVED */
/* box-shadow: 0 16px 40px rgba(0,0,0,0.12); - REMOVED */
transform: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
/* Keep original shadow */
z-index: 5;
}
/* Full size product image */
.product-card .product-image {
height: 260px;
background: #f8fafc;
overflow: hidden;
position: relative;
border-radius: 18px 18px 0 0;
}
.product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: perspective(800px) translateZ(0) rotateX(0) rotateY(0) scale(1);
transition: transform .35s ease;
will-change: transform;
}
.product-card:hover .product-image img {
transform: perspective(800px) translateZ(8px) rotateX(1.2deg) rotateY(-1.2deg) scale(1.08) !important;
}
/* Product info container */
.product-card .product-info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
/* Line 1: Bold English text - left aligned */
.product-card .product-line-1 {
margin-bottom: 4px;
}
.product-card .product-title-en {
font-size: 50px;
font-weight: 800;
color: #111827;
margin: 0;
text-align: left;
line-height: 1;
}
/* Line 2: Kannada text with brackets (left) + review with star icon (right) */
.product-card .product-line-2 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.product-card .product-title-kn {
font-size: 14px;
font-weight: 500;
color: #6b7280;
text-align: left;
}
.product-card .product-rating {
display: flex;
align-items: center;
gap: 4px;
}
.product-card .star-rating {
display: flex;
align-items: center;
gap: 2px;
font-size: 12px;
}
.product-card .star-rating .star {
color: #fbbf24;
}
.product-card .rating-count,
.product-card .no-rating {
font-size: 12px;
color: #6b7280;
}
/* Line 3: Product price */
.product-card .product-line-3 {
margin-bottom: 4px;
}
.product-card .product-price {
font-size: 20px;
font-weight: 700;
color: #111827;
}
.product-card .product-price .amount {
font-weight: 700;
}
/* Line 5: Weights dropdown with Add to Cart button */
.product-card .product-line-5 {
margin-top: auto;
}
.product-card .product-controls {
display: flex;
gap: 10px;
align-items: center;
}
.product-card .weight-dropdown {
flex: 1;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
background: #fff;
color: #374151;
}
.product-card .add-to-cart-btn.orange {
background: #f97316;
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background .2s ease, transform .1s ease;
white-space: nowrap;
}
.product-card .add-to-cart-btn.orange:hover {
background: #ea580c;
transform: translateY(-1px);
}
.product-card .add-to-cart-btn.orange:active {
transform: translateY(0);
}
/* ===== Shop-specific Product Card Styles ===== */
/* These styles are independent from front page product cards */
.shop-product-card {
border-radius: 18px;
background: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
transition: box-shadow .25s ease, transform .25s ease;
position: relative;
display: flex;
flex-direction: column;
overflow: visible;
padding: 0;
}
.shop-product-card:hover {
transform: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
z-index: 5;
}
/* Shop product image */
.shop-product-card .shop-product-image {
min-height: 260px;
height: auto;
background: transparent;
overflow: hidden;
position: relative;
border-radius: 18px 18px 0 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.shop-product-card .shop-product-image img {
width: 100%;
height: 100%;
min-height: 260px;
max-height: 300px;
object-fit: cover;
object-position: center center;
transform: perspective(800px) translateZ(0) rotateX(0) rotateY(0) scale(1);
transition: transform .35s ease;
will-change: transform;
}
.shop-product-card:hover .shop-product-image img {
transform: perspective(800px) translateZ(8px) rotateX(1.2deg) rotateY(-1.2deg) scale(1.08) !important;
}
/* Shop product badges */
.shop-product-card .shop-product-badges {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.shop-product-card .shop-product-badges .badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shop-product-card .shop-product-badges .badge-organic {
background: #10b981;
color: white;
}
.shop-product-card .shop-product-badges .badge-off {
background: #ef4444;
color: white;
}
/* Shop product info container */
.shop-product-card .shop-product-info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
/* Shop product title */
.shop-product-card .shop-gk-product-title {
display: flex;
flex-direction: column;
gap: 2px;
/* Small gap between English and Kannada */
margin-bottom: 4px;
}
.shop-product-card .shop-gk-product-title .en {
font-size: 21.6px !important;
/* Reduced by ~10% from 24px to tighten layout */
font-weight: 700;
color: #111;
line-height: 1.2;
}
.shop-product-card .shop-gk-product-title .kn {
font-size: 25.2px !important;
/* Reduced by ~10% from 28px for consistency */
font-weight: 500 !important;
/* Lighter weight for Kannada text */
color: #666 !important;
/* Gray color for Kannada text */
line-height: 1.2;
display: block;
/* Ensure it's on its own line */
}
/* Shop product meta row */
.shop-product-card .shop-product-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.shop-product-card .shop-product-local {
font-size: 13px;
color: #6b7280;
}
.shop-product-card .shop-product-rating {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
}
/* Shop product price */
.shop-product-card .shop-product-price {
margin-bottom: 8px;
}
.shop-product-card .shop-product-price .current-price {
display: block;
margin-bottom: 4px;
}
.shop-product-card .shop-product-price .prime-price {
font-size: 13px;
color: #059669;
font-weight: 600;
}
/* Shop product controls */
.shop-product-card .shop-product-controls {
padding: 0 16px 16px;
display: flex;
gap: 10px;
align-items: center;
margin-top: auto;
}
.shop-product-card .shop-gk-weight-select {
flex: 1;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
background: #fff;
color: #374151;
}
.shop-product-card .shop-gk-add-to-cart-btn {
background: #f97316;
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background .2s ease, transform .1s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.shop-product-card .shop-gk-add-to-cart-btn:hover {
background: #ea580c;
transform: translateY(-1px);
}
.shop-product-card .shop-gk-add-to-cart-btn:active {
transform: translateY(0);
}
.shop-product-card .shop-gk-add-to-cart-btn .icon {
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
}
/* Shop page specific grid adjustments */
.woocommerce ul.products li.shop-product-card {
margin: 0;
padding: 0;
width: 100%;
}
/* Ensure uniform card heights in products page grid */
.woocommerce ul.products {
display: grid !important;
align-items: stretch;
}
.woocommerce ul.products li.product {
display: flex;
height: 100%;
}
.woocommerce ul.products li.product .shop-product-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Make product info section flexible to maintain uniform heights */
.shop-product-card .shop-product-info {
flex: 1;
display: flex;
flex-direction: column;
}
/* Ensure controls stay at bottom */
.shop-product-card .shop-product-controls {
margin-top: auto;
}
/* Responsive adjustments for shop product cards */
@media (max-width: 768px) {
.shop-product-card .shop-product-image {
min-height: 200px;
height: auto;
padding: 0;
}
.shop-product-card .shop-gk-product-title .en {
font-size: 21px !important;
/* Increased from 16.8px by 25% (total 50% from original 14px) */
}
.shop-product-card .shop-gk-product-title .kn {
font-size: 24px !important;
/* Increased from 21px for better visibility on mobile */
font-weight: 500 !important;
/* Lighter weight for Kannada text */
color: #666 !important;
/* Gray color for Kannada text */
}
}
/* ... existing code ... */
/* Remove old floating add to cart styles - now integrated in line 5 */
/* Maintain existing styles for badge, category, title, price, rating, etc. */
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--brand-orange);
color: var(--white);
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 11;
}
.product-badge.organic {
background: var(--brand-green);
}
.product-category {
font-size: 12px;
color: #6b7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.product-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #111827;
line-height: 1.4;
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.product-price {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.price-regular {
font-size: 30px;
font-weight: 700;
color: #2d6e3e;
}
.price-original {
font-size: 16px;
color: #9ca3af;
text-decoration: line-through;
}
.price-discount {
font-size: 14px;
color: #ef4444;
font-weight: 600;
background: #fee2e2;
padding: 2px 8px;
border-radius: 6px;
}
.product-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.rating-stars {
display: flex;
gap: 2px;
}
.rating-stars .star {
color: #fbbf24;
font-size: 16px;
}
.rating-count {
font-size: 14px;
color: #6b7280;
}
.add-to-cart {
background: var(--brand-green);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
padding: 14px;
width: 100%;
}
.add-to-cart:hover {
background: var(--brand-orange);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(240, 92, 12, 0.3);
}
.add-to-cart svg {
width: 20px;
height: 20px;
}
/* Promotional Banners Section - After Categories */
.promotional-banners {
padding: 48px 0;
background: #ffffff;
}
.promotional-banners .container {
display: grid;
gap: 24px;
}
/* Promo grids used by front-page.php */
.promo-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.promo-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 1024px) {
.promo-grid-3,
.promo-grid-2 {
grid-template-columns: 1fr;
}
}
/* Promo cards */
.promo-card {
position: relative;
overflow: hidden;
border-radius: 16px;
}
.promo-grid-3 .promo-card {
height: 320px;
}
.promo-grid-2 .promo-card {
height: 240px;
}
.promo-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Promotional Banners: missing utilities and parity with Next.js */
/* Gradient overlays (non-strong variants used in front-page.php) */
.promo-gradient-left,
.promo-gradient-right,
.promo-gradient-center {
position: absolute;
inset: 0;
z-index: 1;
}
.promo-gradient-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}
.promo-gradient-right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}
.promo-gradient-center {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.15) 65%, transparent 100%);
}
/* Promo content container and alignment */
.promotional-banners .promo-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 32px 40px;
max-width: 720px;
z-index: 2;
color: #ffffff;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.promotional-banners .promo-content.align-left {
align-items: flex-start;
text-align: left;
}
.promotional-banners .promo-content.align-center {
align-items: center;
text-align: center;
margin: 0 auto;
}
.promotional-banners .promo-content.align-right {
align-items: flex-end;
text-align: right;
margin-left: auto;
}
/* Ensure promo text inherits proper color and spacing */
.promotional-banners .promo-title,
.promotional-banners .promo-kicker,
.promotional-banners .promo-sub {
color: #ffffff;
}
.promotional-banners .promo-title,
.promotional-banners .promo-kicker {
font-family: 'Quicksand', sans-serif;
}
.promotional-banners .promo-title {
margin: 0;
font-weight: 800;
letter-spacing: .02em;
}
.promotional-banners .promo-kicker {
margin: 0;
font-weight: 800;
letter-spacing: .02em;
}
/* Subtitle base only handles spacing/weight; size comes from utilities like .promo-sub-xl when present */
.promotional-banners .promo-sub {
margin: 4px 0 0;
line-height: 1.35;
font-weight: 600;
opacity: 0.95;
}
/* Button used on banners (parity with Next.js rounded CTA) */
.btn-banner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
border-radius: 9999px;
font-weight: 700;
font-size: 16px;
letter-spacing: .01em;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
width: max-content;
margin-top: 12px;
}
@media (min-width: 1024px) {
.btn-banner {
padding: 14px 32px;
font-size: 18px;
}
}
.btn-banner:hover {
transform: translateY(-2px);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
color: #ffffff;
}
/* Color variants to match Next.js palette */
.btn-banner.solid-green {
background: #16a34a;
}
.btn-banner.solid-green:hover {
background: #15803d;
}
/* Promotional banners: force green CTAs to orange for Good Health + Organic products */
.promotional-banners .btn-banner.solid-green {
background: #f97316 !important;
/* orange */
border-color: #f97316 !important;
color: #ffffff !important;
}
.promotional-banners .btn-banner.solid-green:hover {
background: #ea580c !important;
/* darker orange */
border-color: #ea580c !important;
color: #ffffff !important;
}
.btn-banner.solid-orange {
background: #f97316;
}
.btn-banner.solid-orange:hover {
background: #ea580c;
}
.btn-banner.solid-red {
background: #ef4444;
}
.btn-banner.solid-red:hover {
background: #dc2626;
}
/* Simple utility used by markup */
.italic {
font-style: italic;
}
/* Gradient Overlays: strong variants used by markup */
.promo-gradient-left-strong {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}
.promo-gradient-right-strong {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}
/* Footer */
.site-footer {
background: #ffffff;
color: #111827;
padding: 0;
}
/* Newsletter Section - Matching Next.js gradient */
.footer-newsletter {
position: relative;
padding: 80px 0;
overflow: hidden;
background: linear-gradient(135deg, #10b981 0%, #059669 50%, #14b8a6 100%);
}
.footer-newsletter::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
}
.newsletter-content {
position: relative;
z-index: 10;
text-align: center;
}
.newsletter-content h2 {
font-size: 48px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.newsletter-content .highlight {
color: #fef08a;
}
.newsletter-content p {
font-size: 24px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
font-weight: 500;
}
.newsletter-form {
max-width: 600px;
margin: 0 auto;
display: flex;
gap: 16px;
}
.newsletter-form input {
flex: 1;
padding: 16px 24px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
font-size: 18px;
background: rgba(255, 255, 255, 0.95);
color: #111827;
font-weight: 500;
}
.newsletter-form input::placeholder {
color: #6b7280;
}
.newsletter-form input:focus {
outline: none;
border-color: #fbbf24;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.3);
}
.newsletter-form button {
padding: 16px 32px;
background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 700;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.newsletter-form button:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}
/* Trust Indicators */
.trust-indicators {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 24px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 500;
}
.trust-indicators .indicator {
display: flex;
align-items: center;
gap: 8px;
}
/* Main Footer Content */
.footer-main {
background: #1a1a1a;
color: #ffffff;
padding: 60px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 40px;
padding-top: 20px;
}
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.footer-content {
grid-template-columns: 1fr;
}
}
.footer-widget h3 {
font-size: 20px;
margin-bottom: 20px;
color: #ffffff;
font-weight: 700;
}
.footer-widget ul {
list-style: none;
}
.footer-widget ul li {
margin-bottom: 12px;
}
.footer-widget a {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
transition: color .3s;
font-weight: 400;
}
.footer-widget a:hover {
color: var(--brand-green);
}
.footer-widget p {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.footer-contact-item svg {
width: 20px;
height: 20px;
color: var(--brand-green);
flex-shrink: 0;
margin-top: 2px;
}
/* Payment Methods */
.payment-methods {
text-align: center;
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
}
.payment-methods p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
font-size: 16px;
}
.payment-icons {
display: flex;
justify-content: center;
gap: 24px;
align-items: center;
}
.payment-icons span {
font-size: 32px;
}
.payment-icons .payment-text {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
font-size: 16px;
}
.footer-bottom {
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.product-image {
position: relative;
height: 250px;
overflow: hidden;
background: #f8f8f8;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--brand-orange);
color: var(--white);
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Removed duplicate .product-info padding and .product-title block to avoid conflicts */
.product-price {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.price-regular {
font-size: 28px;
font-weight: 400;
color: #2d6e3e;
}
.price-member {
font-size: 18px;
color: var(--brand-green);
background: var(--brand-light-green);
padding: 3px 8px;
border-radius: 4px;
}
.add-to-cart {
width: 100%;
padding: 14px;
background: var(--brand-green);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
}
.add-to-cart:hover {
background: var(--brand-orange);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(240, 92, 12, 0.3);
}
/* Newsletter Section */
.newsletter-section {
padding: 60px 0;
background: linear-gradient(135deg, #feefea 0%, #fef5f2 100%);
text-align: center;
}
.newsletter-section .section-header h2 {
color: var(--brand-orange);
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 15px;
}
.newsletter-form input {
flex: 1;
padding: 14px 25px;
border: 1px solid #e8e8e8;
border-radius: 30px;
font-size: 15px;
background: #fff;
}
.newsletter-form input:focus {
outline: none;
border-color: var(--brand-orange);
}
.newsletter-form button {
padding: 14px 40px;
background: var(--brand-orange);
color: #fff;
border: none;
border-radius: 30px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all .3s;
white-space: nowrap;
}
.newsletter-form button:hover {
background: #e54d00;
transform: translateY(-2px);
}
/* Testimonials Section */
.testimonials-section {
padding: 60px 0;
background: #fafafa;
}
.testimonials-slider {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial-slide {
text-align: center;
padding: 40px;
transition: all .5s ease;
}
.testimonial-slide p {
font-size: 20px;
line-height: 1.8;
color: #555;
margin-bottom: 25px;
font-style: italic;
}
.testimonial-slide h4 {
font-size: 18px;
color: var(--text-primary);
font-weight: 600;
}
/***** Additional alignments *****/
/* Features grid base */
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media(min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.feature-item {
display: flex;
align-items: center;
gap: 16px;
}
/* Cart and Wishlist badges - Orange circle design */
.cart-count,
.wishlist-count,
.header-wishlist-count {
position: absolute !important;
top: -6px !important;
right: -6px !important;
background: #ff6b35 !important;
color: #ffffff !important;
height: 16px !important;
min-width: 16px !important;
width: auto !important;
padding: 0 4px !important;
border-radius: 50% !important;
border: none !important;
display: inline-flex;
align-items: center !important;
justify-content: center !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
text-shadow: none !important;
}
/* Hide count badges when count is 0 */
.cart-count.hidden,
.wishlist-count.hidden,
.header-wishlist-count.hidden {
display: none !important;
}
/* Fine-tune promo typography to match Next.js examples */
/* Footer */
.site-footer {
background: #1a1a1a;
color: #fff;
padding: 60px 0 20px;
}
.footer-logo {
margin-bottom: 50px;
text-align: center;
}
.footer-logo img {
height: 70px;
width: auto;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 40px;
}
.footer-widget h3 {
font-size: 20px;
margin-bottom: 20px;
color: #fff;
font-weight: 600;
}
.footer-widget ul {
list-style: none;
}
.footer-widget ul li {
margin-bottom: 10px;
}
.footer-widget a {
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
transition: color .3s;
}
.footer-widget a:hover {
color: var(--brand-orange);
}
.footer-widget p {
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
.payment-methods {
text-align: center;
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
}
.payment-methods p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
font-size: 15px;
}
.payment-icons {
display: flex;
justify-content: center;
gap: 25px;
align-items: center;
}
.payment-icons span {
font-size: 32px;
}
.payment-icons .payment-text {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
font-size: 16px;
}
.footer-bottom {
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
/* Autocomplete + Categories Dropdown + Modal helpers */
.hidden {
display: none !important;
}
/* === Exact header sizing from Next.js === */
.site-header .header-top {
height: 20px;
/* reduced to match Next.js top bar */
padding: 0;
display: flex;
align-items: center;
}
.site-header .header-top .container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.site-header .header-top .header-top-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.site-header .header-top .promo-text {
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
}
/* Compact top bar text on the right to match Next.js text-xs */
.site-header .header-top-right {
font-size: 12px;
line-height: 1;
}
.site-header .header-top-right a {
color: white;
text-decoration: none;
font-weight: 400;
}
.site-header .header-top-right a:hover {
color: #ffd700;
}
/* Compact top bar text on the right to match Next.js text-xs */
.site-header .header-top-right {
font-size: 12px;
line-height: 1;
}
/* anchor styles fixed and closed properly */
.site-header .header-top-right a {
padding: 0;
}
/* Search suggestions */
.search-suggestions .suggest-item {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #f3f4f6;
color: #111827;
}
.search-suggestions .suggest-item:hover {
background: #f9fafb;
}
.search-suggestions .suggest-item img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
background: #f3f4f6;
}
.search-suggestions .meta {
display: flex;
flex-direction: column;
}
.search-suggestions .name {
font-size: 14px;
font-weight: 600;
color: #111827;
}
.search-suggestions .price {
font-size: 13px;
color: #16a34a;
font-weight: 400;
}
.search-suggestions .suggest-loading,
.search-suggestions .suggest-empty,
.search-suggestions .suggest-error {
padding: 14px;
color: #6b7280;
}
/* Autocomplete keyboard highlight */
.search-suggestions .suggest-item.active {
background: #f3f4f6;
}
.search-suggestions .suggest-item {
outline: none;
}
/* Modal: Pincode selector */
.gk-modal {
position: fixed;
inset: 0;
z-index: 1050;
}
.gk-modal.hidden {
display: none !important;
}
.gk-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.gk-modal-dialog {
position: relative;
width: 92%;
max-width: 420px;
margin: 10vh auto;
background: #fff;
border-radius: 14px;
padding: 20px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}
.gk-modal-close {
position: absolute;
right: 10px;
top: 10px;
background: transparent;
border: 0;
font-size: 22px;
cursor: pointer;
color: #6b7280;
}
.gk-pincode-form {
display: flex;
gap: 10px;
margin-top: 12px;
}
.gk-input {
flex: 1;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
font-size: 16px;
}
.gk-input:focus {
outline: none;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(45, 110, 62, 0.12);
}
.gk-input.error {
border-color: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
.gk-btn {
padding: 12px 16px;
background: var(--brand-green);
color: #fff;
border: 0;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
}
.gk-btn:hover {
background: #256c3b;
}
.gk-hint {
margin-top: 8px;
color: #6b7280;
font-size: 12px;
}
/* === Exact header sizing from Next.js === */
.site-header .header-top {
height: 24px;
/* reduced to match Next.js top bar (py-1 text-xs) */
padding: 0;
/* vertical center with flex below */
display: flex;
align-items: center;
}
.site-header .header-top .container {
width: 100%;
}
.site-header .header-top .header-top-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .header-top .promo-text {
font-size: 12px;
line-height: 1;
}
/* Compact top bar text on the right to match Next.js text-xs */
.site-header .header-top-right {
font-size: 12px;
line-height: 1;
}
.site-header .header-top-right a {
padding: 0;
}
/* Ensure images are responsive by default */
img {
max-width: 100%;
height: auto;
}
/* Match Next.js search input text size (text-xl ~ 20px) */
.search-form-modern .search-input {
font-size: 20px;
}
/* Logo and tagline exact sizes/offsets */
.site-header .logo-box {
width: 280px;
height: 100px;
}
.site-header .site-logo .tagline.tagline-large {
font-size: 13.5px;
/* 18px reduced by 25% */
letter-spacing: 0.05em;
/* tracking-wider */
margin-top: -8px;
/* small negative margin to position right below logo */
font-weight: 700;
/* bold */
line-height: 1;
display: block;
/* ensure full-width for centering */
width: 100%;
text-align: center;
/* center beneath logo */
text-transform: uppercase;
}
/* Keep Browse Categories Button Strong */
.browse-categories-btn {
background: #ff7a00;
/* orange */
color: white;
padding: 8px 16px 10px 16px;
/* Less top, more bottom padding */
border-radius: 8px;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Center content */
gap: 8px;
/* Increased gap */
transition: all 0.2s;
line-height: 1;
/* Tighter line height */
height: 36px;
/* Fixed height */
}
/* Ensure browse text doesn't shift vertical alignment */
.browse-categories-btn .browse-text {
line-height: 1;
/* avoid baseline affecting height */
display: inline-block;
/* respect line-height within flex */
}
.browse-categories-btn:hover {
background: #256c3b;
transform: translateY(-1px);
}
/* Navigation specific adjustments */
.main-navigation .nav-menu li:first-child a {
padding-left: 0;
/* Remove left padding from first item */
}
/* Ensure consistent navigation item styling */
.main-navigation .nav-menu a {
white-space: nowrap;
position: relative;
}
.main-navigation .nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--brand-green);
transform: scaleX(0);
transition: transform 0.2s;
}
.main-navigation .nav-menu a:hover::after {
transform: scaleX(1);
}
/* === Hero (match Next.js hero-section.tsx breakpoints) === */
.hero-next .hero-box {
height: clamp(360px, 55vw, 520px);
min-height: 380px;
}
.hero-next .hero-title {
font-size: 30px;
/* text-3xl */
line-height: 1.2;
font-weight: 900;
}
@media (min-width: 1024px) {
/* lg */
.hero-next .hero-title {
font-size: 36px;
/* text-4xl */
}
}
@media (min-width: 1280px) {
/* xl */
.hero-next .hero-title {
font-size: 48px;
/* text-5xl */
}
}
.hero-next .hero-desc {
font-size: 16px;
}
@media (min-width: 1024px) {
.hero-next .hero-desc {
font-size: 18px;
}
}
/* Hero container responsive padding - removed to ensure full width */
/* Hero container responsive padding */
@media (max-width: 768px) {
.hero-container {
padding: 0 16px;
/* Smaller padding on mobile */
}
}
@media (min-width: 1280px) {
.hero-container {
padding: 0 20px;
/* Standard padding on desktop */
}
}
/* ... existing code ... */
/* Promotional banners heights to match Next */
.promo-grid-3 .promo-card {
height: 320px;
}
.promo-grid-2 .promo-card {
height: 240px;
}
/* Ensure promo large titles comparable to Next values */
.promo-title {
font-size: 48px;
font-weight: 800;
}
.promo-kicker {
font-size: 24px;
font-weight: 700;
}
/* Pixel-exact promotional typography utilities based on Next.js */
.promo-title-6xl {
font-size: 60px;
line-height: 1.05;
font-weight: 800;
letter-spacing: .02em;
}
.promo-title-5xl {
font-size: 48px;
line-height: 1.1;
font-weight: 800;
letter-spacing: .02em;
}
.promo-title-3xl {
font-size: 30px;
line-height: 1.15;
font-weight: 800;
letter-spacing: .01em;
}
.promo-sub-xl {
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
/* Optional banner-specific hooks if you add these classes to markup */
.banner-raw .promo-title {
font-size: 60px;
}
.banner-quality .promo-title {
font-size: 48px;
}
.banner-pure .promo-kicker {
font-size: 30px;
}
.banner-good-health .promo-title {
font-size: 48px;
}
.banner-organic .promo-title {
font-size: 48px;
}
.banner-essentials .promo-title {
font-size: 48px;
}
/* Keep Browse Categories button strong */
.main-navigation .browse-categories a {
padding: 12px 18px;
font-weight: 700;
}
/* Browse All Categories: dropdown panel (pixel-spec) */
/* Categories dropdown CSS removed - now handled in header.php */
/* position root */
.main-navigation {
position: relative;
}
/* Nav button alignment for Browse All Categories */
.main-navigation .nav-menu li:first-child .browse-categories-btn {
margin-right: 10px;
}
/* Ensure the hamburger icon aligns perfectly */
.main-navigation .nav-menu li:first-child .browse-categories-btn svg {
margin-top: 0;
}
/* Align product card sizes and typography with Next.js */
.product-image {
height: auto;
aspect-ratio: 1 / 1;
}
.product-title {
font-size: 14px;
}
@media (min-width: 640px) {
.product-title {
font-size: 16px;
}
}
.price-regular {
font-size: 18px;
}
/* ==== Tighter matching: Category Grid (align with Next.js) ==== */
.category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (min-width: 768px) {
.category-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 1024px) {
.category-grid {
grid-template-columns: repeat(8, 1fr);
}
}
/* Make category cards look like square tiles with larger icons */
.category-card {
border-radius: 16px;
/* Removed overflow: hidden to allow image overlap */
padding: 16px;
background: #f3f4f6;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-card:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.category-card {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.category-icon {
width: 96px;
height: 96px;
margin-bottom: 12px;
}
.category-name {
font-size: 16px;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.01em;
}
/* ==== Tighter matching: Product grid responsiveness (like Next.js layouts) ==== */
/* Align product card sizes and typography with Next.js */
/* Removed extra overrides for .product-title here to avoid conflicting with primary definition at line ~813 */
/* .product-image { height: auto; aspect-ratio: 1 / 1; } */
/* .product-title { font-size: 14px; } */
/* @media (min-width: 640px){ .product-title { font-size: 16px; } } */
/* .price-regular { font-size: 18px; } */
@media (max-width: 1024px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 640px) {
.product-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ==== Tighter matching: Promo banners spacing consistency ==== */
.promotional-banners {
padding-top: 48px;
padding-bottom: 48px;
}
.promo-card {
border-radius: 16px;
}
/* ==== Tighter matching: Footer typography and spacing ==== */
.footer-logo img {
height: 80px;
width: auto;
}
.footer-content {
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (min-width: 1024px) {
.footer-content {
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
}
.footer-widget h3 {
font-size: 18px;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.footer-widget a {
font-size: 14px;
}
.footer-widget p {
font-size: 14px;
}
.footer-bottom {
font-size: 13px;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.header-main .container.header-inner {
flex-wrap: wrap;
}
.header-search {
order: 3;
width: 100%;
max-width: none;
margin-top: 16px;
}
}
@media (max-width: 768px) {
.promotional-banners .promo-content {
padding: 24px;
}
.promo-title {
font-size: 48px;
}
.promo-sub {
font-size: 16px;
}
.newsletter-content h2 {
font-size: 32px;
}
.newsletter-content p {
font-size: 18px;
}
.newsletter-form {
flex-direction: column;
}
}
/* Ensure proper spacing between sections */
.category-section+.promotional-banners {
padding-top: 0;
}
.promotional-banners+.featured-products {
padding-top: 64px;
}
/* Product card hover effects */
.product-card {
position: relative;
overflow: hidden;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(45, 110, 62, 0.05) 0%, rgba(45, 110, 62, 0) 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.product-card:hover::before {
opacity: 1;
}
.product-card>* {
position: relative;
z-index: 2;
}
/* Ensure buttons have proper cursor */
button,
.btn-banner,
.add-to-cart,
.browse-categories-btn {
cursor: pointer;
}
/* Fix any text selection issues */
.promo-content * {
user-select: none;
}
/* Ensure images don't have gaps */
img {
display: block;
max-width: 100%;
height: auto;
}
/* Remove duplicate category-grid styles */
.category-grid {
display: none;
}
/* This will be replaced with horizontal scroll */
/* Final overrides for Top Categories to avoid clashes */
.category-section .category-scroll-container {
display: flex;
}
.category-section .category-card {
flex-shrink: 0;
min-width: 120px;
max-width: 140px;
padding: 12px 8px;
background: transparent;
border: 2px solid transparent;
box-shadow: none;
aspect-ratio: auto !important;
}
.category-section .category-card:hover {
transform: none;
}
.category-section .category-media {
width: 64px !important;
height: 64px !important;
border-radius: 50%;
background: #f3f4f6;
}
.category-section .category-media img {
width: 40px !important;
height: 40px !important;
object-fit: contain;
}
.category-section .category-title {
font-size: 14px;
}
.category-section .category-count {
font-size: 12px;
}
/* Override for Top Categories section - ensure left alignment and black text */
.category-section .section-header {
text-align: left !important;
}
.category-section .section-header h2 {
color: #000 !important;
text-align: left !important;
}
.category-section .section-header p {
color: #000 !important;
font-weight: 400 !important;
text-align: left !important;
margin: 0 !important;
max-width: none !important;
}
/* Additional specific overrides for category section text */
body .category-section .section-header h2,
body .site-main .category-section .section-header h2,
.site .category-section .section-header h2 {
color: #000000 !important;
}
body .category-section .section-header p,
body .site-main .category-section .section-header p,
.site .category-section .section-header p {
color: #000000 !important;
font-weight: 400 !important;
}
/* Force black color on all text within category section header */
.category-section .section-header * {
color: #000000 !important;
}
/* === Next.js alignment overrides appended === */
/* Top categories section gradient band */
.category-section {
position: relative;
padding: 48px 0;
background: #ffffff;
z-index: 0;
}
.category-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(45, 110, 62, 0.06) 0%, rgba(45, 110, 62, 0) 40%, #ffffff 100%);
pointer-events: none;
z-index: 0;
}
.category-section .section-header,
.category-section .category-scroll-wrapper,
.category-section .category-grid {
position: relative;
z-index: 1;
}
/* Rounded wrapper card around horizontal scroller */
.category-scroll-wrapper {
margin: 0 -20px;
padding: 8px 20px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #eef2f7;
border-radius: 24px;
}
/* Arrows styled like Next.js brand ring buttons */
.category-arrow {
background: rgba(255, 255, 255, 0.9);
border-radius: 9999px;
border: 1px solid rgba(45, 110, 62, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.category-arrow:hover {
background: rgba(45, 110, 62, 0.08);
border-color: rgba(45, 110, 62, 0.35);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.category-arrow svg {
color: var(--brand-green);
}
/* Category cards and media backplates */
.category-card {
border-radius: 14px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #e5e7eb;
position: relative;
/* Removed overflow: hidden to allow image overlap */
}
.category-card .category-media {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
border: 1px solid #e5e7eb;
}
.category-card.organic .category-media {
background: #ecfdf5;
border-color: #d1fae5;
}
.category-card.essentials .category-media {
background: #fff7ed;
border-color: #ffedd5;
}
.category-card .category-media img {
width: 84px;
height: 84px;
}
/* Active state alignment */
.category-card.active {
background: #ffffff;
border-color: #22c55e;
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.15);
}
.category-card.active .category-title {
color: #15803d;
}
/* Nav button alignment for Browse All Categories */
.main-navigation .nav-menu li:first-child .browse-categories-btn {
background: #ff7a00;
/* orange */
color: #fff;
border-radius: 8px;
padding: 8px 16px;
/* equal vertical padding for perfect centering */
font-weight: 700;
line-height: 1;
/* avoid baseline shifting */
height: 36px;
/* fixed height for consistency */
display: inline-flex;
/* keep icon and text on one line */
align-items: center;
/* vertically center icon and text */
gap: 8px;
/* spacing between icon and text */
}
/* Slightly lower the hamburger icon to align with text baseline */
.main-navigation .nav-menu li:first-child .browse-categories-btn svg {
display: block;
/* remove inline baseline behavior */
width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0;
/* no vertical shift */
position: static;
/* reset any previous relative positioning */
top: auto;
/* reset top offset */
}
/* === Category proximity bounce and non-blocking overlay === */
/* Overlay ring around icons that never blocks pointer events */
.category-media::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.0) 60%);
transform: scale(0.85);
transition: transform 160ms ease, opacity 160ms ease;
opacity: 0.0;
pointer-events: none !important;
}
.category-card.organic .category-media::after {
background: radial-gradient(circle at center, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.0) 60%);
}
.category-card.essentials .category-media::after {
background: radial-gradient(circle at center, rgba(234, 88, 12, 0.18), rgba(234, 88, 12, 0.0) 60%);
}
/* Keep the card-level decorative layer non-blocking too */
.category-card::before {
pointer-events: none;
}
/* Proximity-driven bounce: reacts when cursor is near, not only over */
/* JS toggles .is-near and sets --near (0..1). Use it to interpolate scale. */
.category-card.is-near .category-media img {
/* scale from 1 to ~2.2 based on proximity */
transform: translateY(calc(-6px * var(--near, 0))) scale(calc(1 + 1.2 * var(--near, 0)));
}
.category-card.is-near .category-media::after {
opacity: calc(0.15 + 0.85 * var(--near, 0));
transform: scale(calc(0.85 + 0.15 * var(--near, 0)));
}
/* When directly hovered, show the overlay too */
.category-card:hover .category-media::after,
.category-card .category-media:hover::after,
.category-card:focus-within .category-media::after {
opacity: 1;
transform: scale(1);
}
/* Additional styles to ensure images overlap rounded corners on zoom */
.category-card {
overflow: visible !important;
/* Ensure overflow is visible */
z-index: 1;
position: relative;
}
.category-card:hover {
z-index: 10;
/* Bring hovered card to front */
}
.category-media {
overflow: visible !important;
/* Allow content to overflow */
z-index: 1;
}
.category-media img {
transition: transform 0.3s ease;
z-index: 2;
position: relative;
}
/* Enhanced zoom effect for images */
.category-card:hover .category-media img {
transform: scale(1.4);
/* Increased scale for more dramatic effect */
}
/* Additional fixes for category spacing and arrow positioning */
.category-section .container {
position: relative;
padding: 0 20px;
/* Keep standard container padding */
}
.category-scroll-wrapper {
margin: 0;
/* No negative margins */
position: relative;
overflow: visible;
/* Allow arrows to be visible outside */
padding-left: 0;
/* Ensure no left padding on wrapper */
}
/* Ensure arrows overlap the container borders */
.category-arrow {
opacity: 1;
visibility: visible;
z-index: 20;
/* Higher z-index to ensure it's above categories */
}
.category-arrow.left {
left: -10px;
/* Slightly more outside to not block first category */
transform: translateY(-50%);
}
.category-arrow.right {
right: -10px;
/* Slightly more outside for symmetry */
transform: translateY(-50%);
}
.category-arrow:hover.left {
transform: translateY(-50%) scale(1.05);
}
.category-arrow:hover.right {
transform: translateY(-50%) scale(1.05);
}
/* Hide arrows when not needed */
.category-arrow[style*="display: none"] {
opacity: 0;
visibility: hidden;
}
/* === Promotional banners – size reduction overrides (match Next.js scale tighter) === */
body .promotional-banners .promo-title.promo-title-6xl,
body .promotional-banners .promo-kicker.promo-title-6xl {
font-size: 48px;
line-height: 1.08;
}
body .promotional-banners .promo-title.promo-title-5xl,
body .promotional-banners .promo-kicker.promo-title-5xl {
font-size: 40px;
line-height: 1.12;
}
body .promotional-banners .promo-title.promo-title-3xl,
body .promotional-banners .promo-kicker.promo-title-3xl {
font-size: 24px;
line-height: 1.2;
}
body .promotional-banners .promo-sub.promo-sub-xl {
font-size: 18px;
}
/* Slightly smaller pill button on banners */
body .promotional-banners .btn-banner {
padding: 10px 22px;
font-size: 14px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
@media (min-width: 1024px) {
body .promotional-banners .btn-banner {
padding: 12px 26px;
font-size: 16px;
}
}
/* === Promotional banners – size reduction overrides (pass 2) === */
/* Tighter text and CTA sizing specifically for promo banners */
body .promotional-banners .promo-content {
max-width: 640px;
padding: 24px 32px;
}
body .promotional-banners .promo-title.promo-title-6xl,
body .promotional-banners .promo-kicker.promo-title-6xl {
font-size: 40px;
line-height: 1.08;
}
body .promotional-banners .promo-title.promo-title-5xl,
body .promotional-banners .promo-kicker.promo-title-5xl {
font-size: 34px;
line-height: 1.12;
}
body .promotional-banners .promo-title.promo-title-3xl,
body .promotional-banners .promo-kicker.promo-title-3xl {
font-size: 20px;
line-height: 1.2;
}
body .promotional-banners .promo-sub.promo-sub-xl {
font-size: 16px;
}
/* Smaller pill button on banners */
body .promotional-banners .btn-banner {
padding: 8px 18px;
font-size: 13px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
@media (min-width: 1024px) {
body .promotional-banners .btn-banner {
padding: 10px 20px;
font-size: 14px;
}
}
/* Global 25% size reduction across the entire site (content + images) */
/* Note: Uses zoom where supported and a transform fallback. Adjust --site-scale as needed. */
:root {
--site-scale: 1;
}
/* Changed from 0.75 to 1 to remove zoom effect */
/* Primary scaling (Chrome/Edge/Safari if supported) */
body {
zoom: var(--site-scale);
}
/* Avoid horizontal scroll due to scaling */
html,
body {
overflow-x: hidden;
}
/* Firefox-specific fallback */
@-moz-document url-prefix() {
html {
transform: none !important;
width: auto !important;
}
body {
transform: scale(var(--site-scale));
transform-origin: top left;
width: calc(100% / var(--site-scale));
min-height: 100%;
}
}
/* Generic fallback when zoom is not supported (covers Safari/others if needed) */
@supports not (zoom: 1) {
body {
transform: scale(var(--site-scale));
transform-origin: top left;
width: calc(100% / var(--site-scale));
min-height: 100%;
}
}
/* === GK Top Categories Overrides: 9/page, 2x default icon, bounce on hover === */
/* Layout overrides so nine visible items are not clipped and are centered */
.category-section .category-scroll-wrapper {
overflow: visible;
}
.category-section .category-scroll-container {
display: flex;
flex-wrap: nowrap !important;
justify-content: flex-start;
overflow-x: scroll !important;
overflow-y: hidden !important;
gap: 12px;
}
.category-section .category-card {
display: flex;
}
/* === GK Top Categories (single row) and bounce variants === */
/* Single-row layout for nine visible items on desktop */
@media (min-width: 1024px) {
.category-section .category-scroll-wrapper {
overflow: visible;
}
.category-section .category-scroll-container {
display: flex;
flex-wrap: nowrap !important;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
overflow-x: scroll !important;
}
.category-section .category-card {
flex: 0 0 auto;
max-width: none;
display: flex;
justify-content: center;
}
}
/* Allow wrapping on smaller screens */
@media (max-width: 1023.98px) {
.category-section .category-scroll-wrapper {
overflow: visible;
}
.category-section .category-scroll-container {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 10px;
overflow-x: scroll !important;
-webkit-overflow-scrolling: touch;
}
}
/* Default 2x icon size in Top Categories */
.category-section .category-card .category-media img {
transform: scale(2) !important;
transform-origin: center center;
}
/* Removed bounce animations and related hover rules for Top Categories */
/* Popular Products (Featured) refined styles to match reference */
.featured-products .section-header h2 {
font-size: 42px;
font-weight: 800;
letter-spacing: -0.02em;
}
/* Hide plugin-injected loop controls to prevent duplicates in Featured grid */
.featured-products .product-card .add_to_cart_button,
.featured-products .product-card a.button.product_type_simple,
.featured-products .product-card a.button.product_type_variable,
.featured-products .product-card a.button.product_type_grouped,
.featured-products .product-card .yith-wcwl-add-to-wishlist,
.featured-products .product-card .tinvwl_add_to_wishlist_button,
.featured-products .product-card .tinvwl-woocommerce-add-to-wishlist,
.featured-products .product-card .tinvwl-tooltip {
display: none !important;
}
.featured-products .section-header p {
font-size: 18px;
color: #6b7280;
}
/* Popular Products header adjustments: left align, smaller orange title */
.featured-products .section-header,
.featured-products .section-header-split,
.featured-products .section-header-split .section-left {
text-align: left !important;
}
/* Prevent center margins from generic section-header rules */
.featured-products .section-header-split .section-left p {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Reduce Popular Products title by ~30% and set orange color */
.featured-products .section-header-split .section-left h2 {
color: var(--brand-orange);
font-size: 25px;
/* increase by ~25% from 20px */
margin-bottom: 3px;
/* reduce gap to subtitle by ~80% */
line-height: 1.2;
}
.featured-products .section-header-split .section-left p {
margin-top: 0;
/* ensure tight spacing under title */
}
/* Card base and hover */
.product-card {
border-radius: 18px;
background: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
transition: box-shadow .25s ease, transform .25s ease;
}
/* Remove hover effect from card - only image should hover */
.product-card:hover {
/* transform: translateY(-4px); - REMOVED */
/* box-shadow: 0 18px 44px rgba(0,0,0,0.12); - REMOVED */
transform: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
/* Keep original shadow */
}
/* Image and hover tilt/scale */
.product-card .product-image {
height: 280px;
background: #f8fafc;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.product-card .product-image img {
width: 100%;
height: 100%;
object-fit: contain;
transform: perspective(800px) translateZ(0) rotateX(0) rotateY(0) scale(1);
transition: transform .35s ease;
}
.product-card:hover .product-image img {
transform: perspective(800px) translateZ(8px) rotateX(1.2deg) rotateY(-1.2deg) scale(1.08) !important;
}
/* Badges */
.product-badges {
position: absolute;
top: 8px;
left: 8px;
display: flex;
gap: 8px;
z-index: 3;
}
.badge {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
padding: 4px 10px;
border-radius: 9999px;
color: #fff;
}
.badge-organic {
background: #22c55e;
font-size: 8px !important;
padding: 3px 7px !important;
opacity: 0.6 !important;
}
.badge-off {
background: #ef4444;
}
/* Info */
.product-info {
padding: 14px 16px 16px;
}
.featured-products .product-card .product-info {
padding: 10px 12px 12px;
}
.product-title {
font-size: 16px;
font-weight: 700;
color: #111;
margin: 0 0 6px;
line-height: 1.3;
text-align: left;
}
.product-meta-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.featured-products .product-card .product-meta-row {
gap: 6px;
}
.product-local {
font-size: 24px;
color: #065f46;
padding: 2px 8px;
border-radius: 9999px;
font-weight: 600;
}
.product-rating {
font-size: 12px;
color: #6b7280;
font-weight: 600;
}
/* Prices */
.product-price {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.featured-products .product-card .product-price {
margin-bottom: 8px;
gap: 2px;
}
.product-price .price-regular {
font-size: 23px;
font-weight: 400;
color: #2d6e3e;
}
.product-price .price-member {
font-size: 16px;
color: var(--brand-green);
}
/* Bottom controls */
.product-controls {
display: flex;
align-items: center;
gap: 10px;
}
.product-variant {
appearance: none;
font-size: 12px;
color: #111827;
background: #f3f4f6;
border: 1px solid #e5e7eb;
padding: 6px 10px;
border-radius: 8px;
}
.controls-spacer {
flex: 1;
}
.product-card .add-to-cart.compact {
background: #2d6e3e;
color: #fff;
font-weight: 700;
padding: 8px 14px;
border-radius: 9999px;
box-shadow: 0 8px 16px rgba(45, 110, 62, 0.25);
transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.product-card .add-to-cart.compact:hover {
background: #256c3b;
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(45, 110, 62, 0.3);
}
/* CTA under grid */
.featured-products-cta {
text-align: center;
margin-top: 24px;
}
.btn-view-all {
display: inline-block;
background: #111827;
color: #fff;
padding: 10px 16px;
border-radius: 9999px;
font-weight: 700;
text-decoration: none;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-view-all:hover {
background: #0b1220;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
color: #ffffff;
}
@media (max-width: 640px) {
.product-card .product-image {
height: 220px;
}
}
/* Allow icon to extend outside the card’s rounded border */
.category-card {
overflow: visible !important;
}
/* === GK Top Categories: enforce 50% larger icons and overlapping arrows === */
/* Increase category icon container and image size by 50% over current theme values */
.category-section .category-card .category-media,
.category-section .category-media {
width: 90px !important;
/* 50% of 180px */
height: 90px !important;
/* 50% of 180px */
}
/* Keep image size as previously increased so it overlaps the smaller circle */
.category-section .category-card .category-media img,
.category-section .category-media img {
width: 126px !important;
height: 126px !important;
transform: none !important;
}
/* Ensure arrows can overlap the container boundaries */
.category-section,
.category-section .category-scroll-wrapper {
overflow: visible !important;
}
/* Pull arrows outside the edges a bit and make sure they sit on top */
.category-section .category-arrow {
z-index: 50 !important;
}
.category-section .category-arrow.left {
left: -24px !important;
}
.category-section .category-arrow.right {
right: -24px !important;
}
/* === GroKarna Product Cards (unified across loops) === */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
.product-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: transform .2s ease, box-shadow .2s ease;
}
/* Remove hover effect from card - only image should hover */
.product-card:hover {
/* transform: translateY(-3px); - REMOVED */
/* box-shadow: 0 8px 24px rgba(0,0,0,0.12); - REMOVED */
transform: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
/* Keep original shadow */
}
.product-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
/* transform: translateY(-3px); - REMOVED */
/* box-shadow: 0 8px 24px rgba(0,0,0,0.12); - REMOVED */
transform: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
/* Keep original shadow */
}
/* === NEW 5-LINE PRODUCT CARD STRUCTURE === */
.product-info-new {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Line 1: Bold English text (left aligned) */
.product-title-bold {
font-size: 16px;
font-weight: 700;
color: #111827;
margin: 0;
text-align: left;
line-height: 1.3;
}
/* Line 2: Kannada text (left) with review and star icon (right) */
.product-line-2 {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 20px;
}
.kannada-text {
font-size: 14px;
color: #6b7280;
font-weight: 400;
text-align: left;
flex: 1;
}
.review-stars {
font-size: 12px;
color: #f59e0b;
font-weight: 600;
text-align: right;
white-space: nowrap;
}
/* Line 3: Product price */
.product-price-line {
font-size: 16px;
font-weight: 700;
color: #111827;
text-align: left;
}
.product-price-line .price {
font-size: 16px;
font-weight: 700;
color: #111827;
}
.product-price-line .woocommerce-Price-amount {
font-size: 16px;
font-weight: 700;
color: #111827;
}
/* Line 4: Product price for prime members with asterisk */
.product-prime-price {
font-size: 13px;
color: #2d6e3e;
font-weight: 600;
text-align: left;
}
.no-prime-price {
color: #9ca3af;
font-size: 12px;
font-weight: 400;
}
/* Line 5: Weights dropdown with orange colored cart button */
.product-line-5 {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.weights-dropdown {
flex: 1;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
color: #111827;
background: #fff;
appearance: none;
cursor: pointer;
}
.weights-dropdown:hover {
border-color: #d1d5db;
}
.weights-dropdown:focus {
outline: none;
border-color: #f05c0c;
box-shadow: 0 0 0 3px rgba(240, 92, 12, 0.1);
}
.weight-fixed {
flex: 1;
padding: 8px 12px;
font-size: 13px;
color: #6b7280;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-align: center;
}
.cart-btn-orange {
background: #f05c0c;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
min-width: 120px;
justify-content: center;
}
.cart-btn-orange:hover {
background: #e85502;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(240, 92, 12, 0.25);
}
.cart-btn-orange:active {
transform: translateY(0);
}
.cart-icon {
font-size: 14px;
line-height: 1;
}
/* Responsive adjustments */
@media (max-width: 640px) {
.product-info-new {
padding: 12px;
gap: 10px;
}
.product-title-bold {
font-size: 15px;
}
.product-line-5 {
flex-direction: column;
gap: 8px;
}
.weights-dropdown,
.weight-fixed {
width: 100%;
}
.cart-btn-orange {
width: 100%;
}
}
/* === JavaScript Cart Functionality === */
/* Add some visual feedback for cart interactions */
.cart-btn-orange.adding {
background: #34d399 !important;
transform: scale(0.95);
}
.cart-btn-orange.adding .cart-icon::before {
content: "✓";
}
.cart-btn-orange.adding span:last-child {
opacity: 0.7;
}
/* Hide original WooCommerce compatibility forms */
.woo-compatibility {
display: none !important;
}
/* Ensure product images maintain proper aspect ratio */
.gk-product-card .woocommerce-LoopProduct-link img,
.product-card .product-image img {
aspect-ratio: 1/1;
object-fit: cover;
width: 100%;
height: 100%;
}
.product-card .card-media {
position: relative;
overflow: hidden;
background: #fff;
}
.product-card .media-link {
display: block;
position: relative;
aspect-ratio: 1/1;
}
@supports not (aspect-ratio: 1 / 1) {
.product-card .media-link::before {
content: "";
display: block;
padding-bottom: 100%;
}
}
.product-card .card-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
transition: transform .3s ease;
}
.product-card:hover .card-media img {
transform: scale(1.02);
}
/* Badges */
.product-card .badge-wrap {
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.product-card .badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.product-card .badge--category {
background: #0f172a;
opacity: 0.9;
}
.product-card .badge--offer {
background: #f05c0c;
}
/* Body and titles */
.product-card .card-body {
padding: 10px 12px 12px;
}
.product-card .product-title.kn {
font-size: 14px;
color: #666;
margin: 2px 0;
line-height: 1.3;
}
.product-card .product-title.en {
font-size: 15px;
font-weight: 700;
margin: 0;
color: #111;
line-height: 1.35;
}
.product-card .product-title.en a {
color: inherit;
text-decoration: none;
}
/* Prices */
.product-card .price-stack {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 6px;
margin-bottom: 8px;
}
.product-card .price-actual {
font-size: 20px;
font-weight: 400;
color: #2d6e3e;
}
.product-card .price-prime {
font-size: 0.93em !important;
color: #66CC66 !important;
display: flex;
align-items: center;
gap: 6px;
font-weight: 400 !important;
}
.product-card .price-prime .label {
background: #f0f8f3;
color: #66CC66 !important;
padding: 2px 8px;
border-radius: 999px;
font-weight: 400 !important;
font-size: 0.66em;
}
.product-card .price-prime .value {
font-weight: 400 !important;
color: #66CC66 !important;
}
/* Bottom row */
.product-card .row-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
}
.product-card .gk-variation-select {
flex: 1 1 auto;
padding: 8px 10px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
color: #111827;
background: #fff;
}
.product-card .button.button--sm {
flex: 0 0 auto;
padding: 8px 10px;
font-size: 13px;
line-height: 1;
border-radius: 8px;
width: auto;
background: #0f172a;
color: #fff;
}
.product-card .meta-tag {
font-size: 12px;
color: #6b7280;
background: #f3f4f6;
padding: 2px 8px;
border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
.product-card {
background: #0b1220;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.product-card .product-title.en,
.product-card .price-actual {
color: #e2e8f0;
}
}
/* ===== PRODUCT CARD FIXES - Added to fix display issues ===== */
/* Fix product card layout to prevent white space on right */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce ul.products li.product {
margin: 0;
padding: 0;
width: 100%;
}
.product-card {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.product-card .card-body {
flex: 1;
display: flex;
flex-direction: column;
}
/* Ensure price information is always visible */
.product-card .price-stack,
.product-card .price-actual,
.product-card .price-prime {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Style the weight selector properly */
.product-card .gk-variation-select {
width: 100%;
max-width: 120px;
padding: 8px 30px 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
color: #111827;
background: #fff;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.product-card .gk-variation-select:hover {
border-color: #d1d5db;
}
.product-card .gk-variation-select:focus {
outline: none;
border-color: #2d6e3e;
box-shadow: 0 0 0 3px rgba(45, 110, 62, 0.1);
}
/* Ensure row actions stay at bottom */
.product-card .row-actions {
margin-top: auto;
padding-top: 8px;
}
/* Fix button styling for better visibility */
.product-card .button.button--sm,
.product-card .button.select-options {
background: #2d6e3e;
color: #fff;
font-weight: 600;
padding: 10px 16px;
min-width: 80px;
text-align: center;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.product-card .button.button--sm:hover,
.product-card .button.select-options:hover {
background: #256c3b;
transform: translateY(-1px);
}
/* Responsive grid adjustments */
@media (min-width: 640px) {
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.woocommerce ul.products {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
/* Remove any hover-dependent visibility */
.product-card .price-stack:not(:hover),
.product-card .row-actions:not(:hover) {
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure consistent card heights */
.product-card .card-media {
flex-shrink: 0;
}
.product-card .card-media .media-link {
display: block;
width: 100%;
height: 100%;
}
/* Fix any potential overflow issues */
.product-card {
overflow: visible;
}
.product-card .card-body {
overflow: hidden;
}
/* Ensure product titles don't overflow */
.product-card .product-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-card .product-title.en {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
max-height: 2.8em;
}
/* ===== HOMEPAGE POPULAR PRODUCTS CRITICAL FIXES ===== */
/* These rules override the hover-only visibility */
.featured-products .product-card .product-controls {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-top: 12px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* ===== WOOCOMMERCE PRODUCT ARCHIVE HOVER CARD DESIGN ===== */
/* Apply same hover effects as popular products section */
/* Make shop page product cards identical to front page */
.woocommerce .product-grid .product-card,
.shop-product-grid .product-card,
.featured-products-grid .product-card {
position: relative;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce .product-grid .product-card:hover,
.shop-product-grid .product-card:hover,
.featured-products-grid .product-card:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
/* Image styling for shop page */
.woocommerce .product-grid .product-card .product-image,
.shop-product-grid .product-card .product-image,
.featured-products-grid .product-card .product-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
}
.woocommerce .product-grid .product-card .product-image img,
.shop-product-grid .product-card .product-image img,
.featured-products-grid .product-card .product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.0);
transition: transform .25s ease;
}
.woocommerce .product-grid .product-card:hover .product-image img,
.shop-product-grid .product-card:hover .product-image img,
.featured-products-grid .product-card:hover .product-image img {
transform: scale(1.03);
}
/* Badges for shop page */
.woocommerce .product-grid .product-card .product-badges,
.shop-product-grid .product-card .product-badges,
.featured-products-grid .product-card .product-badges {
position: absolute;
left: 10px;
top: 20px;
display: flex;
gap: 6px;
z-index: 2;
}
.woocommerce .product-grid .product-card .badge,
.shop-product-grid .product-card .badge,
.featured-products-grid .product-card .badge {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 6px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #0b5e37;
background: #e6f5ec;
border: 1px solid #cde9d9;
}
.woocommerce .product-grid .product-card .badge-off,
.shop-product-grid .product-card .badge-off,
.featured-products-grid .product-card .badge-off {
color: #8a2c0a;
background: #fff3eb;
border-color: #ffd8bf;
}
/* Product info for shop page */
.woocommerce .product-grid .product-card .product-info,
.shop-product-grid .product-card .product-info,
.featured-products-grid .product-card .product-info {
padding: 12px 12px 58px;
/* leave space for hover controls */
}
.woocommerce .product-grid .product-card .gk-product-title,
.shop-product-grid .product-card .gk-product-title,
.featured-products-grid .product-card .gk-product-title {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
margin: 2px 0 6px;
text-align: left;
}
.woocommerce .product-grid .product-card .product-meta-row,
.shop-product-grid .product-card .product-meta-row,
.featured-products-grid .product-card .product-meta-row {
display: flex;
gap: 8px;
color: var(--text-gray);
font-size: 12px;
}
/* Prices for shop page */
.woocommerce .product-grid .product-card .product-price,
.shop-product-grid .product-card .product-price,
.featured-products-grid .product-card .product-price {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.woocommerce .product-grid .product-card .current-price,
.shop-product-grid .product-card .current-price,
.featured-products-grid .product-card .current-price {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
}
.woocommerce .product-grid .product-card .member-price,
.shop-product-grid .product-card .member-price,
.featured-products-grid .product-card .member-price {
font-size: 13px;
font-weight: 700;
color: var(--brand-green);
}
/* Hover controls for shop page */
.woocommerce .product-grid .product-card .product-controls,
.shop-product-grid .product-card .product-controls,
.featured-products-grid .product-card .product-controls {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 8px 10px;
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: all .18s ease;
}
.woocommerce .product-grid .product-card:hover .product-controls,
.shop-product-grid .product-card:hover .product-controls,
.featured-products-grid .product-card:hover .product-controls {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.woocommerce .product-grid .product-card .gk-weight-select,
.shop-product-grid .product-card .gk-weight-select,
.featured-products-grid .product-card .gk-weight-select {
appearance: none;
border: 1px solid var(--border-light);
background: var(--bg-light);
color: var(--text-dark);
padding: 6px 30px 6px 10px;
border-radius: 10px;
font-size: 13px;
flex: 1;
}
.woocommerce .product-grid .product-card .gk-add-to-cart-btn,
.shop-product-grid .product-card .gk-add-to-cart-btn,
.featured-products-grid .product-card .gk-add-to-cart-btn {
background: var(--brand-orange);
color: #fff;
border: 0;
padding: 8px 12px;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
.woocommerce .product-grid .product-card .gk-add-to-cart-btn:hover,
.shop-product-grid .product-card .gk-add-to-cart-btn:hover,
.featured-products-grid .product-card .gk-add-to-cart-btn:hover {
/* Hover color change removed as per user request */
cursor: pointer;
}
.woocommerce .product-grid .product-card .gk-add-to-cart-btn:active,
.shop-product-grid .product-card .gk-add-to-cart-btn:active,
.featured-products-grid .product-card .gk-add-to-cart-btn:active {
transform: translateY(1px);
}
.woocommerce ul.products .product-card {
background: #fff;
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .18s ease, box-shadow .18s ease;
position: relative;
}
.woocommerce ul.products .product-card:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
/* Product image hover effects */
.woocommerce ul.products .product-card .product-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
}
.woocommerce ul.products .product-card .product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.0);
transition: transform .25s ease;
}
.woocommerce ul.products .product-card:hover .product-image img {
transform: scale(1.03);
}
/* Product info styling - adjusted for smaller cards */
.woocommerce ul.products .product-card .product-info {
padding: 10px 10px 48px;
/* leave space for hover controls, reduced for smaller cards */
}
/* Hover controls positioning - adjusted for smaller cards */
.woocommerce ul.products .product-card .product-controls {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 6px 8px;
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: all .18s ease;
}
.woocommerce ul.products .product-card:hover .product-controls {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Style variation selects in product archive - adjusted for smaller cards */
.woocommerce ul.products .product-card .gk-weight-select {
appearance: none;
border: 1px solid var(--border-light);
background: var(--bg-light);
border-radius: 6px;
padding: 4px 24px 4px 8px;
font-size: 11px;
color: var(--text-dark);
cursor: pointer;
flex: 1;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.4rem center;
background-size: 0.9em;
}
/* Style add to cart button in product archive - adjusted for smaller cards */
.woocommerce ul.products .product-card .gk-add-to-cart-btn {
background: var(--brand-green);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.woocommerce ul.products .product-card .gk-add-to-cart-btn:hover {
/* Hover color change removed as per user request */
cursor: pointer;
}
/* Badge styling for product archive */
.woocommerce ul.products .product-card .product-badges {
position: absolute;
left: 10px;
top: 20px;
display: flex;
gap: 6px;
z-index: 2;
}
.woocommerce ul.products .product-card .badge {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 6px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #0b5e37;
background: #e6f5ec;
border: 1px solid #cde9d9;
}
.woocommerce ul.products .product-card .badge-off {
color: #8a2c0a;
background: #fff3eb;
border-color: #ffd8bf;
}
/* Product title and meta styling - adjusted for smaller cards */
.woocommerce ul.products .product-card .product-title {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
margin: 2px 0 4px;
text-align: left;
line-height: 1.3;
}
.woocommerce ul.products .product-card .product-meta-row {
display: flex;
gap: 6px;
color: var(--text-gray);
font-size: 11px;
}
.woocommerce ul.products .product-card .product-local {
font-size: 12px !important;
color: #6b7280;
}
/* Price styling - adjusted for smaller cards */
.woocommerce ul.products .product-card .product-price {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.woocommerce ul.products .product-card .price-regular {
font-size: 18px;
font-weight: 700;
color: #2d6e3e;
}
.woocommerce ul.products .product-card .price-member {
font-size: 14px;
font-weight: 700;
color: var(--brand-green);
}
.featured-products .product-card .product-variant {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #f3f4f6 !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 0.5rem center !important;
background-size: 1em !important;
padding: 6px 30px 6px 10px !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
font-size: 12px !important;
color: #111827 !important;
cursor: pointer !important;
flex: 1 !important;
}
.featured-products .product-card .product-info {
padding-bottom: 12px !important;
position: relative !important;
}
.featured-products .product-card .product-price,
.featured-products .product-card .price-regular,
.featured-products .product-card .price-member {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Remove any remaining hover dependencies */
.featured-products .product-card:not(:hover) .product-controls,
.featured-products .product-card:not(:hover) .product-price {
opacity: 1 !important;
visibility: visible !important;
}
/* ===== FIX PRODUCT TITLE SPACING ===== */
.featured-products .product-card .product-title {
margin-bottom: 0px !important;
line-height: 1.2 !important;
font-size: 28px !important;
}
.featured-products .product-card .product-meta-row {
margin-top: 0px !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
.featured-products .product-card .product-local {
font-size: 26px !important;
color: #6b7280 !important;
display: block !important;
}
/* ===== ENSURE CONTROLS ARE CLICKABLE ===== */
.featured-products .product-card .product-controls {
position: relative !important;
z-index: 100 !important;
pointer-events: all !important;
}
.featured-products .product-card .product-variant,
.featured-products .product-card .add-to-cart {
position: relative !important;
z-index: 101 !important;
pointer-events: all !important;
}
/* Prevent parent link from interfering */
.featured-products .product-card>a {
position: relative !important;
z-index: 1 !important;
}
/* Alternative layout if controls are moved outside link */
.featured-products .product-card>.product-controls {
padding: 0 12px 12px !important;
margin-top: -8px !important;
position: relative !important;
z-index: 102 !important;
}
/* Ensure buttons keep white text across interactive states */
.btn-banner,
.btn-banner:hover,
.btn-banner:focus,
.btn-banner:active,
.btn-banner:visited,
.btn-hero,
.btn-hero:hover,
.btn-hero:focus,
.btn-hero:active,
.btn-hero:visited,
.btn-view-all,
.btn-view-all:hover,
.btn-view-all:focus,
.btn-view-all:active,
.btn-view-all:visited {
color: #ffffff !important;
}
/* Hero CTA buttons: force both hero buttons to orange regardless of variant */
.hero-next .btn-hero,
.hero-next .hero-text-wrap a,
.hero-next .hero-text-wrap button,
.hero-next a.button,
.hero-next .button,
.hero-next a.btn,
.hero-next .btn {
background: #f97316 !important;
/* orange */
border-color: #f97316 !important;
color: #ffffff !important;
}
.hero-next .btn-hero:hover,
.hero-next .hero-text-wrap a:hover,
.hero-next .hero-text-wrap button:hover,
.hero-next a.button:hover,
.hero-next .button:hover,
.hero-next a.btn:hover,
.hero-next .btn:hover {
background: #ea580c !important;
/* darker orange */
border-color: #ea580c !important;
color: #ffffff !important;
}
/* Force all promotional banner CTAs to orange */
.promotional-banners .btn-banner,
.promotional-banners a.btn-banner {
background: #f97316 !important;
border-color: #f97316 !important;
color: #ffffff !important;
}
.promotional-banners .btn-banner:hover,
.promotional-banners a.btn-banner:hover {
background: #ea580c !important;
border-color: #ea580c !important;
color: #ffffff !important;
}
/* ========================================
Product Hover Card Modifications
======================================== */
/* Reduce add to cart button size in product hover cards */
.product-card:hover .add_to_cart_button,
.product-card:hover .single_add_to_cart_button,
.product-card:hover .button.add_to_cart_button,
.product-card .add_to_cart_button:hover,
.woocommerce .product-card:hover .add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button:hover {
padding: 4px 10px !important;
font-size: 12px !important;
min-height: auto !important;
line-height: 1.2 !important;
}
/* Increase variant selector dropdown size in product hover cards */
.product-card:hover .variations select,
.product-card:hover .variations_form select,
.product-card .variations select:hover,
.product-card .variations select:focus,
.woocommerce .product-card:hover .variations select,
.woocommerce ul.products li.product .variations select:hover,
.woocommerce ul.products li.product .variations select:focus {
font-size: 16px !important;
height: auto !important;
min-height: 40px !important;
padding: 8px 12px !important;
border: 2px solid #e5e7eb !important;
border-radius: 6px !important;
}
/* Additional styling for better visual hierarchy */
.product-card:hover .variations select:focus {
border-color: var(--brand-orange) !important;
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1) !important;
outline: none !important;
}
/* Ensure proper spacing in product cards */
.product-card:hover .variations {
margin-bottom: 12px !important;
}
.product-card:hover .variations .variation-selector {
margin-bottom: 8px !important;
}
/* Custom CSS modifications for GroKarna theme */
/* Reduce add to cart button size in product hover cards */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.product-hover-card .add_to_cart_button,
.woocommerce .products .product .button {
font-size: 12px !important;
padding: 6px 12px !important;
min-height: auto !important;
line-height: 1.2 !important;
}
/* Increase variant selector dropdown size */
.woocommerce .variations select,
.woocommerce-variation-select,
.variations_form .variations select,
.single-product .variations select {
font-size: 16px !important;
padding: 8px 12px !important;
min-height: 40px !important;
width: 100% !important;
}
/* Additional styling for better appearance */
.woocommerce .variations td.value select {
border: 2px solid #ddd !important;
border-radius: 4px !important;
}
.woocommerce .variations td.value select:focus {
border-color: #007cba !important;
outline: none !important;
}
/* Shop Product Card Font Size Override - 20% Increase */
/* Shop Product Card Font Size Override - 50% Total Increase (20% + 25%) */
/* Added at the end to ensure highest specificity */
.woocommerce ul.products li.shop-product-card .shop-gk-product-title .en,
.shop-product-card .shop-gk-product-title .en {
font-size: 24px !important;
/* Increased to 24px (50% total increase from original 16px) */
}
.woocommerce ul.products li.shop-product-card .shop-gk-product-title .kn,
.shop-product-card .shop-gk-product-title .kn {
font-size: 28px !important;
/* Larger than English text for better visibility */
font-weight: 500 !important;
/* Lighter weight for Kannada text */
color: #666 !important;
/* Gray color for Kannada text */
display: block;
/* Ensure it's on its own line */
}
/* Mobile responsive override */
@media (max-width: 768px) {
.woocommerce ul.products li.shop-product-card .shop-gk-product-title .en,
.shop-product-card .shop-gk-product-title .en {
font-size: 21px !important;
font-weight: 700 !important;
color: #111 !important;
}
.woocommerce ul.products li.shop-product-card .shop-gk-product-title .kn,
.shop-product-card .shop-gk-product-title .kn {
font-size: 24px !important;
/* Larger than English text on mobile */
font-weight: 500 !important;
/* Lighter weight for Kannada text */
color: #666 !important;
/* Gray color for Kannada text */
}
}
/* KANNADA FONT SIZE INCREASE - HIGHEST PRIORITY */
body .woocommerce ul.products li.product .shop-product-card .shop-gk-product-title .kn,
body .shop-product-card .shop-gk-product-title .kn,
.shop-gk-product-title .kn {
font-size: 32px !important;
/* Much larger than English text */
font-weight: 500 !important;
color: #666 !important;
display: block !important;
line-height: 1.3 !important;
}
/* KANNADA TEXT IN PRODUCT CARDS - CORRECT SELECTOR */
/* The Kannada text is in shop-product-local class, not in shop-gk-product-title */
.shop-product-card .shop-product-local,
.woocommerce ul.products li.product .shop-product-local,
body .shop-product-local {
font-size: 18px !important;
/* Reduced by 20% from 22px */
font-weight: 700 !important;
color: #111827 !important;
display: inline-block !important;
line-height: 1.3 !important;
}
/* Remove parentheses from Kannada text if needed */
.shop-product-card .shop-product-local::before {
content: "" !important;
}
.shop-product-card .shop-product-local::after {
content: "" !important;
}
/* Mobile Kannada text */
@media (max-width: 768px) {
.shop-product-card .shop-product-local,
.woocommerce ul.products li.product .shop-product-local,
body .shop-product-local {
font-size: 15px !important;
/* Reduced by 20% from 18px */
}
}
/* Mobile Kannada text */
@media (max-width: 768px) {
.shop-product-card .shop-product-local,
.woocommerce ul.products li.product .shop-product-local,
body .shop-product-local {
font-size: 21.6px !important;
color: #90EE90 !important;
font-weight: normal !important;
}
}
/* ========== WISHLIST STYLING ========== */
/* Wishlist Heart Icon Container */
.wishlist-heart-container {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
}
/* Wishlist Heart Button Base Styles */
.wishlist-heart-btn {
background: none !important;
border: none !important;
cursor: pointer;
padding: 0;
border-radius: 0 !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 0;
transform: scale(0.8);
box-shadow: none !important;
}
/* Heart Icons */
.heart-icon,
.heart-icon-filled {
font-size: 20px;
position: absolute;
transition: all 0.3s ease;
font-weight: normal;
line-height: 1;
}
/* Default state - white outline heart */
.wishlist-heart-btn .heart-icon {
color: white;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
opacity: 1;
}
.wishlist-heart-btn .heart-icon-filled {
color: #e53e3e;
opacity: 0;
transform: scale(0.8);
}
/* Show heart on hover for non-wishlisted items */
.shop-product-card:hover .wishlist-heart-btn:not(.in-wishlist) {
opacity: 1;
transform: scale(1);
}
/* Always show for wishlisted items */
.wishlist-heart-btn.in-wishlist {
opacity: 1 !important;
transform: scale(1) !important;
background: none !important;
box-shadow: none !important;
}
.wishlist-heart-btn.in-wishlist .heart-icon {
opacity: 0;
transform: scale(0.8);
}
.wishlist-heart-btn.in-wishlist .heart-icon-filled {
opacity: 1;
transform: scale(1);
}
/* Hover effects */
.wishlist-heart-btn:hover {
background: none !important;
box-shadow: none !important;
transform: scale(1.1);
}
.wishlist-heart-btn:hover .heart-icon {
transform: scale(1.1);
}
.wishlist-heart-btn:hover .heart-icon-filled {
transform: scale(1.1);
}
/* Animation when adding/removing */
.wishlist-heart-btn.animate-add {
animation: heartBeat 0.6s ease-in-out;
}
.wishlist-heart-btn.animate-remove {
animation: heartShrink 0.4s ease-in-out;
}
@keyframes heartBeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.3);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1.15);
}
}
@keyframes heartShrink {
0% {
transform: scale(1.15);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
/* Featured products wishlist heart (for front page) */
.featured-products .product-card .wishlist-heart-container {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
}
.featured-products .product-card .wishlist-heart-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
cursor: pointer;
padding: 8px;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0;
transform: scale(0.8);
}
.featured-products .product-card:hover .wishlist-heart-btn:not(.in-wishlist) {
opacity: 1;
transform: scale(1);
}
.featured-products .product-card .wishlist-heart-btn.in-wishlist {
opacity: 1 !important;
transform: scale(1) !important;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ========== WISHLIST PAGE STYLING ========== */
.gk-wishlist-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wishlist-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.wishlist-header h2 {
font-size: 32px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.wishlist-count {
color: #6b7280;
font-size: 16px;
margin: 0;
}
/* Empty Wishlist State */
.wishlist-empty {
text-align: center;
padding: 80px 20px;
background: #f9fafb;
border-radius: 16px;
border: 1px dashed #d1d5db;
}
.empty-wishlist-icon {
font-size: 64px;
color: #d1d5db;
margin-bottom: 24px;
line-height: 1;
}
.wishlist-empty h3 {
font-size: 24px;
color: #111827;
margin-bottom: 12px;
font-weight: 600;
}
.wishlist-empty p {
color: #6b7280;
font-size: 16px;
margin-bottom: 32px;
line-height: 1.5;
}
.wishlist-continue-shopping {
display: inline-block;
background: #f97316;
color: white !important;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s ease;
}
.wishlist-continue-shopping:hover {
background: #ea580c;
color: white !important;
text-decoration: none;
}
/* Wishlist Items */
.wishlist-items {
display: grid;
gap: 24px;
}
.wishlist-item {
display: flex;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 16px;
padding: 24px;
align-items: center;
gap: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
position: relative;
}
.wishlist-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.wishlist-item-image {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
background: #f3f4f6;
}
.wishlist-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.wishlist-item:hover .wishlist-item-image img {
transform: scale(1.05);
}
.wishlist-item-details {
flex: 1;
min-width: 0;
}
.wishlist-item-details h4 {
margin: 0 0 8px 0;
font-size: 20px;
font-weight: 600;
color: #111827;
line-height: 1.3;
}
.wishlist-item-details h4 a {
color: #111827;
text-decoration: none;
transition: color 0.2s ease;
}
.wishlist-item-details h4 a:hover {
color: #f97316;
}
.variation-details {
color: #6b7280;
font-size: 14px;
margin: 0 0 12px 0;
background: #f3f4f6;
padding: 4px 8px;
border-radius: 6px;
display: inline-block;
}
.wishlist-item-price {
font-size: 18px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.wishlist-item-price .woocommerce-Price-amount {
font-weight: 700;
}
.date-added {
color: #9ca3af;
font-size: 13px;
}
.wishlist-item-actions {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
align-items: stretch;
min-width: 140px;
}
.wishlist-item-actions .button,
.wishlist-item-actions .button-secondary {
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
border: none;
white-space: nowrap;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.move-to-cart-btn {
background: #f97316 !important;
color: white !important;
text-decoration: none;
}
.move-to-cart-btn:hover {
background: #ea580c !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.remove-from-wishlist-btn {
background: #f3f4f6 !important;
color: #6b7280 !important;
border: 1px solid #e5e7eb !important;
}
.remove-from-wishlist-btn:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
border-color: #fecaca !important;
}
/* Loading and disabled states */
.wishlist-item-actions .button:disabled,
.wishlist-item-actions .button-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.wishlist-item-actions .button.loading::after,
.wishlist-item-actions .button-secondary.loading::after {
content: '';
width: 16px;
height: 16px;
border: 2px solid;
border-color: transparent currentColor currentColor transparent;
border-radius: 50%;
display: inline-block;
animation: spin 1s linear infinite;
margin-left: 8px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Login required state */
.wishlist-login-required {
text-align: center;
padding: 80px 20px;
background: #f9fafb;
border-radius: 16px;
border: 1px solid #e5e5e5;
}
.wishlist-login-required h3 {
color: #111827;
margin-bottom: 16px;
font-size: 24px;
font-weight: 600;
}
.wishlist-login-required .button {
background: #f97316;
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s ease;
}
.wishlist-login-required .button:hover {
background: #ea580c;
}
/* Responsive Design */
@media (max-width: 768px) {
.gk-wishlist-container {
padding: 20px 16px;
}
.wishlist-header h2 {
font-size: 28px;
}
.wishlist-item {
flex-direction: column;
text-align: center;
gap: 16px;
}
.wishlist-item-image {
width: 100%;
max-width: 200px;
height: 200px;
margin: 0 auto;
}
.wishlist-item-details {
text-align: center;
}
.wishlist-item-actions {
flex-direction: row;
width: 100%;
gap: 12px;
}
.wishlist-item-actions .button,
.wishlist-item-actions .button-secondary {
flex: 1;
min-width: auto;
}
/* Heart icon mobile adjustments */
.wishlist-heart-btn {
width: 36px;
height: 36px;
padding: 6px;
}
.heart-icon,
.heart-icon-filled {
font-size: 18px;
}
}
/* PRIME MEMBERS PRICE STYLING - GLOBAL UPDATE */
/* Increased font size by 10%, medium light green color, with bold */
.product-card .member-price,
.product-card .prime-price,
.shop-product-card .member-price,
.shop-product-card .prime-price,
.woocommerce .member-price,
.woocommerce .prime-price,
body .member-price,
body .prime-price {
font-size: 0.814em !important;
/* Increased by 10% from 0.74em */
color: #66CC66 !important;
/* Medium light green */
font-weight: bold !important;
/* Bold text */
}
/* Ensure all child elements also have bold font weight */
.member-price *,
.prime-price * {
font-weight: bold !important;
color: #66CC66 !important;
}
/* ===== PRODUCT CARD VERTICAL ALIGNMENT FIX ===== */
/* Ensure all content inside product cards is properly aligned */
.product-card .product-info,
.featured-products .product-card .product-info,
.shop-product-card .product-info,
.woocommerce .product-card .product-info {
padding: 25px !important;
/* Increased from 16px by adding 5px */
display: flex;
flex-direction: column;
gap: 8px;
text-align: left !important;
}
/* Product title alignment */
.product-card .gk-product-title,
.featured-products .product-card .gk-product-title,
.shop-product-card .gk-product-title,
.woocommerce .product-card .gk-product-title {
text-align: left !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* English and Kannada text alignment */
.gk-product-title .en,
.gk-product-title .kn {
display: block;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
/* Meta row alignment */
.product-card .product-meta-row,
.featured-products .product-card .product-meta-row,
.shop-product-card .product-meta-row,
.woocommerce .product-card .product-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 8px 0 !important;
padding: 0 !important;
width: 100%;
text-align: left !important;
}
/* Local name alignment */
.product-card .product-local,
.featured-products .product-card .product-local,
.shop-product-card .product-local,
.woocommerce .product-card .product-local {
margin: 0 !important;
padding: 2px 8px !important;
display: inline-block;
}
/* Price alignment */
.product-card .product-price,
.featured-products .product-card .product-price,
.shop-product-card .product-price,
.woocommerce .product-card .product-price {
display: flex;
flex-direction: column;
align-items: flex-start !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Current price alignment */
.product-card .current-price,
.featured-products .product-card .current-price,
.shop-product-card .current-price,
.woocommerce .product-card .current-price {
display: block;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
}
/* Member price alignment */
.product-card .member-price,
.product-card .prime-price,
.featured-products .product-card .member-price,
.featured-products .product-card .prime-price,
.shop-product-card .member-price,
.shop-product-card .prime-price,
.woocommerce .product-card .member-price,
.woocommerce .product-card .prime-price {
display: block !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* Controls alignment */
.product-card .product-controls,
.featured-products .product-card .product-controls,
.shop-product-card .product-controls,
.woocommerce .product-card .product-controls {
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
/* Wishlist specific inline layout enforcement */
.wishlist-item .product-controls,
.wishlist-redesigned .product-controls,
.wishlist-product-card .product-controls {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 12px !important;
padding: 12px 15px 15px 15px !important;
margin: 0 !important;
}
.wishlist-item .gk-weight-select,
.wishlist-redesigned .gk-weight-select,
.wishlist-product-card .gk-weight-select {
flex: 1 !important;
min-width: 120px !important;
max-width: none !important;
margin: 0 !important;
padding: 8px 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
font-size: 14px !important;
background: #fff !important;
}
.wishlist-item .gk-add-to-cart-btn,
.wishlist-redesigned .gk-add-to-cart-btn,
.wishlist-product-card .gk-add-to-cart-btn {
flex-shrink: 0 !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 8px 16px !important;
background: #f97316 !important;
color: white !important;
border: none !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 14px !important;
min-width: 80px !important;
}
/* Remove any absolute positioning from controls in non-hover state */
.product-card .product-controls {
position: relative !important;
}
/* Keep absolute positioning only for featured products hover controls */
.featured-products .product-card .product-controls {
position: absolute !important;
left: 12px;
right: 12px;
bottom: 12px;
}
/* Rating alignment - ensure it stays on the right */
.product-card .product-rating,
.featured-products .product-card .product-rating,
.shop-product-card .product-rating,
.woocommerce .product-card .product-rating {
margin-left: auto !important;
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
/* Ensure weight select and add to cart button are properly aligned */
.product-card .gk-weight-select,
.featured-products .product-card .gk-weight-select,
.shop-product-card .gk-weight-select,
.woocommerce .product-card .gk-weight-select {
flex: 1;
text-align: left;
}
.product-card .gk-add-to-cart-btn,
.featured-products .product-card .gk-add-to-cart-btn,
.shop-product-card .gk-add-to-cart-btn,
.woocommerce .product-card .gk-add-to-cart-btn {
flex-shrink: 0;
}
/* FINAL EDGE ALIGNMENT OVERRIDES */
/* Remove any left/right padding on top-level wrappers so edges align */
.site-header,
.header-top,
.header-main,
.main-navigation,
.hero-next,
.category-section,
.promotional-banners,
.featured-products,
.site-footer,
footer,
main,
#main,
#page {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure internal .container controls gutters consistently (set to 0 now) */
/* Header containers with 2x padding (40px) */
.header-top .container,
.header-main .container,
.main-navigation .container {
padding-left: var(--grok-side-padding) !important;
padding-right: var(--grok-side-padding) !important;
}
/* Footer container with 2x padding (40px) */
footer .container,
.site-footer .container {
padding-left: var(--grok-side-padding) !important;
padding-right: var(--grok-side-padding) !important;
}
/* Other sections remain with no padding */
.hero-next .container,
.category-section .container,
.promotional-banners .container,
.featured-products .container,
main .container,
#main .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Responsive padding for header and footer on smaller screens (mobile) */
@media (max-width: 768px) {
:root {
--grok-side-padding: 15px;
/* Mobile padding */
}
}
/* SECTION MICRO-GUTTERS (except header and footer) */
/* Adjust horizontal padding to exactly 1px as requested */
:root {
--section-gutter-x: 1px;
}
.hero-next,
.category-section,
.promotional-banners,
.featured-products,
.product-section,
.newsletter-section,
.testimonials-section,
section.page-section {
padding-left: var(--section-gutter-x) !important;
padding-right: var(--section-gutter-x) !important;
}
/* Keep header and footer edge-to-edge */
.site-header,
.header-top,
.header-main,
.main-navigation,
footer,
.site-footer {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* GLOBAL 1PX PADDING FOR ALL SECTIONS (EXCEPT HEADER/FOOTER) */
/* Applies to most top-level blocks under main/#main/#page and any */
main>*:not(header):not(footer):not(.site-header):not(.site-footer),
#main>*:not(header):not(footer):not(.site-header):not(.site-footer),
#page>main>*:not(header):not(footer):not(.site-header):not(.site-footer),
section:not(.site-header):not(.site-footer) {
padding-left: var(--section-gutter-x) !important;
padding-right: var(--section-gutter-x) !important;
}
/* Custom padding for main content area (excluding header and footer) */
/* This adds comfortable left and right padding to the website content while preventing overflow */
/* First, ensure the main container doesn't overflow */
.site-main {
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
/* Add padding to all content sections while maintaining proper width */
.site-main .hero-next,
.site-main .category-section,
.site-main .promotional-banners,
.site-main .featured-products,
.site-main .product-section,
.site-main .newsletter-section,
.site-main .testimonials-section,
.site-main section.page-section,
main>.hero-next,
main>.category-section,
main>.promotional-banners,
main>.featured-products,
main>.product-section,
main>.newsletter-section,
main>.testimonials-section,
main>section.page-section,
#main>.hero-next,
#main>.category-section,
#main>.promotional-banners,
#main>.featured-products,
#main>.product-section,
#main>.newsletter-section,
#main>.testimonials-section,
#main>section.page-section {
padding-left: 10px !important;
padding-right: 10px !important;
max-width: calc(100vw - 20px) !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure containers within sections also respect the width limits */
.site-main .container,
.site-main .hero-container {
max-width: calc(100% - 0px) !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* For larger screens, increase the padding */
@media (min-width: 768px) {
.site-main .hero-next,
.site-main .category-section,
.site-main .promotional-banners,
.site-main .featured-products,
.site-main .product-section,
.site-main .newsletter-section,
.site-main .testimonials-section,
.site-main section.page-section,
main>.hero-next,
main>.category-section,
main>.promotional-banners,
main>.featured-products,
main>.product-section,
main>.newsletter-section,
main>.testimonials-section,
main>section.page-section,
#main>.hero-next,
#main>.category-section,
#main>.promotional-banners,
#main>.featured-products,
#main>.product-section,
#main>.newsletter-section,
#main>.testimonials-section,
#main>section.page-section {
padding-left: 20px !important;
padding-right: 20px !important;
max-width: calc(100vw - 40px) !important;
}
}
@media (min-width: 1200px) {
.site-main .hero-next,
.site-main .category-section,
.site-main .promotional-banners,
.site-main .featured-products,
.site-main .product-section,
.site-main .newsletter-section,
.site-main .testimonials-section,
.site-main section.page-section,
main>.hero-next,
main>.category-section,
main>.promotional-banners,
main>.featured-products,
main>.product-section,
main>.newsletter-section,
main>.testimonials-section,
main>section.page-section,
#main>.hero-next,
#main>.category-section,
#main>.promotional-banners,
#main>.featured-products,
#main>.product-section,
#main>.newsletter-section,
#main>.testimonials-section,
#main>section.page-section {
padding-left: 30px !important;
padding-right: 30px !important;
max-width: calc(100vw - 60px) !important;
}
/* Page sections that need larger side padding */
#main>section.page-section {
padding-left: 60px !important;
padding-right: 60px !important;
max-width: calc(100vw - 120px) !important;
}
}
/* Ensure header and footer remain full-width */
.site-header,
.site-footer {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100vw !important;
}
/* Additional Policy Page Enhancements */
.policy-nav-link.active {
background: var(--brand-green) !important;
color: white !important;
}
.policy-section {
scroll-margin-top: 100px;
/* Account for sticky navigation */
}
/* Print styles for policies */
@media print {
.policy-navigation,
.site-header,
.site-footer {
display: none !important;
}
.policy-section {
page-break-inside: avoid;
margin-bottom: 30px;
}
.policy-section h2 {
page-break-after: avoid;
}
}
/* Enhanced mobile responsiveness for policies */
@media (max-width: 480px) {
.policies-page .container {
padding: 0 10px;
}
.policy-section {
padding: 20px 15px;
}
.page-header {
padding: 30px 20px;
}
.page-header h1 {
font-size: 28px;
}
.policy-navigation {
padding: 15px;
}
}
/* =============================================
WISHLIST PAGE PRODUCT CARD WIDTH FIX
Fix for "Move to Cart" button text being cut off
============================================= */
/* Increase wishlist product card minimum width to accommodate full button text */
.wishlist-products-grid {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}
/* CRITICAL FIX: Override the max-width constraint on wishlist Move to Cart button */
button.gk-add-to-cart-btn.wishlist-move-to-cart-btn,
.wishlist-move-to-cart-btn.gk-add-to-cart-btn {
max-width: none !important;
min-width: 150px !important;
width: auto !important;
white-space: nowrap !important;
padding: 12px 20px !important;
}
/* Alternative: If cards still look too narrow, increase further */
@media (min-width: 768px) {
.wishlist-products-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
}
}
/* Ensure button text doesn't wrap or get cut off */
.wishlist-move-to-cart-btn span {
display: inline !important;
white-space: nowrap !important;
}
/* Make sure the product controls container has enough width */
.wishlist-products-grid .product-controls {
width: 100% !important;
min-width: 280px !important;
}
/* Cache bust: 1759670970 */
/* ============================================
FARM BASKET WISHLIST ICON STYLES (Design 8)
============================================ */
/* Wishlist Basket Container - Redesigned System */
.wishlist-heart-redesign {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0.6;
transform: scale(0.9);
padding: 4px;
}
/* Enhanced visibility on hover for non-wishlisted items */
.product-card:hover .wishlist-heart-redesign:not(.wishlisted),
.shop-product-card:hover .wishlist-heart-redesign:not(.wishlisted) {
opacity: 1;
transform: scale(1.1);
}
/* Always show for wishlisted items */
.wishlist-heart-redesign.wishlisted {
opacity: 1 !important;
transform: scale(1) !important;
}
/* Basket icon using background image */
.wishlist-heart-redesign .heart-icon {
width: 28px;
height: 28px;
/* HIDE TEXT - We use SVG background instead */
display: none !important;
font-size: 0 !important;
color: transparent !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
/* For backwards compatibility - if heart-icon is used as background container */
.wishlist-heart-redesign .heart-icon.use-background {
display: block !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease;
}
/* Inactive state - light gray basket outline */
.wishlist-heart-redesign:not(.wishlisted) .heart-icon.use-background {
background-image: url('assets/icons/basket-inactive.svg');
}
/* Active state - warm brown basket with green produce */
.wishlist-heart-redesign.wishlisted .heart-icon.use-background {
background-image: url('assets/icons/basket-active.svg');
}
/* Hover effects */
.wishlist-heart-redesign:hover {
transform: scale(1.1) !important;
}
@keyframes basketBounce {
0% {
transform: scale(1);
}
25% {
transform: scale(1.3);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1.15);
}
}
@keyframes basketShrink {
0% {
transform: scale(1.15);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
/* Featured products basket (for front page) */
.featured-products .product-card .wishlist-heart-redesign {
width: 30px;
height: 30px;
}
.featured-products .product-card .wishlist-heart-redesign .heart-icon {
width: 26px;
height: 26px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wishlist-heart-redesign {
width: 28px;
height: 28px;
}
.wishlist-heart-redesign .heart-icon {
width: 24px;
height: 24px;
}
}
/* Ensure basket is visible and clickable */
.wishlist-heart-redesign {
pointer-events: auto !important;
visibility: visible !important;
}
/* Cache bust for basket icons */
/* Basket icons v1.0 - Farm Basket Design 8 */
/* Additional fixes for product card images - remove white padding */
.product-card .product-image {
padding: 0 !important;
margin: 0 !important;
}
.product-card .product-image img {
padding: 0 !important;
margin: 0 !important;
display: block;
}
/* Single product page wishlist icon positioning */
.single-product-wishlist {
opacity: 1 !important;
visibility: visible !important;
}
/* ================================================
Enhanced Add to Cart Button Feedback
================================================ */
/* Smooth transition for all add to cart buttons */
.gk-add-to-cart-btn,
.add_to_cart_button,
.single_add_to_cart_button {
transition: all 0.3s ease-in-out;
}
/* Loading state */
.gk-add-to-cart-btn.loading,
.add_to_cart_button.loading,
.single_add_to_cart_button.loading {
opacity: 0.7;
pointer-events: none;
}
/* Added state - smooth color transition */
.gk-add-to-cart-btn.added,
.add_to_cart_button.added,
.single_add_to_cart_button.added {
background-color: #28a745 !important;
border-color: #28a745 !important;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
/* Smooth text transition */
.gk-add-to-cart-btn span,
.add_to_cart_button span,
.single_add_to_cart_button span {
transition: opacity 0.2s ease-in-out;
}
/* Icon transitions */
.gk-add-to-cart-btn i,
.add_to_cart_button i,
.single_add_to_cart_button i {
transition: transform 0.3s ease-in-out;
}
/* Icon animation when added */
.gk-add-to-cart-btn.added i,
.add_to_cart_button.added i,
.single_add_to_cart_button.added i {
transform: scale(1.2);
}
/* Prevent button from changing size during state changes */
.gk-add-to-cart-btn,
.add_to_cart_button,
.single_add_to_cart_button {
min-width: 120px;
text-align: center;
}
/* ============================================================================
FRONT PAGE - POPULAR PRODUCTS WISHLIST BASKETS
============================================================================ */
/* Ensure wishlist baskets work on front page Popular Products section */
/* Ensure wishlist baskets work on front page Popular Products section */
.front-page .product-grid .wishlist-heart-redesign,
.home .product-grid .wishlist-heart-redesign {
/* Positioning */
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 32px !important;
height: 32px !important;
cursor: pointer !important;
z-index: 10 !important;
/* Visibility & Opacity */
display: flex !important;
visibility: visible !important;
opacity: 0.6 !important;
pointer-events: auto !important;
/* CRITICAL: Remove all backgrounds from wrapper to prevent overlap */
background: none !important;
background-image: none !important;
border: none !important;
/* Smooth transition */
transition: all 0.3s ease !important;
}
/* Disable pseudo-elements on wrapper */
.front-page .product-grid .wishlist-heart-redesign::before,
.front-page .product-grid .wishlist-heart-redesign::after,
.home .product-grid .wishlist-heart-redesign::before,
.home .product-grid .wishlist-heart-redesign::after {
content: none !important;
display: none !important;
background: none !important;
}
/* Ensure the inner heart icon carries the SVG background and handles the swap */
.front-page .product-grid .wishlist-heart-redesign .heart-icon,
.home .product-grid .wishlist-heart-redesign .heart-icon {
display: block !important;
width: 28px !important;
height: 28px !important;
font-size: 0 !important;
/* Hide any fallback text */
/* Default Inactive State */
background-image: url('assets/icons/basket-inactive.svg') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: transparent !important;
transition: all 0.3s ease !important;
}
/* Active State - Swap to active basket */
.front-page .product-grid .wishlist-heart-redesign.wishlisted .heart-icon,
.front-page .product-grid .wishlist-heart-redesign.in-wishlist .heart-icon,
.home .product-grid .wishlist-heart-redesign.wishlisted .heart-icon,
.home .product-grid .wishlist-heart-redesign.in-wishlist .heart-icon {
background-image: url('assets/icons/basket-active.svg') !important;
}
/* Hide any other icons inside the wrapper */
.front-page .product-grid .wishlist-heart-redesign i:not(.heart-icon),
.front-page .product-grid .wishlist-heart-redesign svg:not(.heart-icon),
.home .product-grid .wishlist-heart-redesign i:not(.heart-icon),
.home .product-grid .wishlist-heart-redesign svg:not(.heart-icon) {
display: none !important;
}
/* Show baskets on hover */
.front-page .product-grid .product-card:hover .wishlist-heart-redesign,
.home .product-grid .product-card:hover .wishlist-heart-redesign {
opacity: 1 !important;
transform: scale(1.1) !important;
}
/* Always show wishlisted baskets with active icon */
.front-page .product-grid .wishlist-heart-redesign.wishlisted,
.front-page .product-grid .wishlist-heart-redesign.in-wishlist,
.home .product-grid .wishlist-heart-redesign.wishlisted,
.home .product-grid .wishlist-heart-redesign.in-wishlist {
opacity: 1 !important;
transform: scale(1) !important;
background: none !important;
/* Double check wrapper has no background */
}
/* Hover effect - scale up */
.front-page .product-grid .wishlist-heart-redesign:hover,
.home .product-grid .wishlist-heart-redesign:hover {
transform: scale(1.15) !important;
}
/* ==========================================================================
Video Section - Front Page
========================================================================== */
.video-section {
padding: 60px 30px;
background-color: #f9f9f9;
}
.video-section .container {
max-width: 1200px;
margin: 0 auto;
}
.video-section .section-header {
text-align: center;
margin-bottom: 40px;
}
.video-section .section-header h2 {
font-size: 32px;
margin-bottom: 10px;
color: #333;
font-weight: 600;
}
.video-section .section-header p {
font-size: 16px;
color: #666;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background-color: #000;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Responsive Styles for Mobile */
@media screen and (max-width: 768px) {
.video-section {
padding: 40px 20px;
/* Reduce padding on mobile to 20px left/right */
}
.video-section .section-header h2 {
font-size: 24px;
}
.video-section .section-header p {
font-size: 14px;
}
.video-wrapper {
border-radius: 8px;
}
}
@media screen and (max-width: 480px) {
.video-section {
padding: 30px 15px;
/* Even smaller padding for very small screens */
}
.video-section .section-header h2 {
font-size: 20px;
}
.video-section .section-header {
margin-bottom: 25px;
}
}
/* ===================================
Portrait Video Section (TikTok-style)
=================================== */
.portrait-video-section {
padding: 60px 0;
background-color: #f9f9f9;
}
.portrait-video-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
.portrait-video-section .section-header {
text-align: center;
margin-bottom: 40px;
}
.portrait-video-section .section-header h2 {
font-size: 32px;
margin-bottom: 10px;
color: #333;
font-weight: 700;
}
.portrait-video-section .section-header p {
font-size: 16px;
color: #666;
}
/* Portrait Videos Wrapper */
.portrait-videos-wrapper {
position: relative;
padding: 0 50px;
}
/* Scrollable Container */
.portrait-videos-container {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 10px 0 20px 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE/Edge */
}
.portrait-videos-container::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
/* Individual Portrait Video Card */
.portrait-video-card {
flex-shrink: 0;
width: 280px;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.portrait-video-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* Portrait Video Wrapper - 9:16 aspect ratio */
.portrait-video-wrapper {
position: relative;
width: 100%;
padding-top: 177.78%;
/* 9:16 aspect ratio */
}
.portrait-video-wrapper .gk-lite-youtube-portrait {
position: absolute;
inset: 0;
padding-top: 0;
height: 100%;
border-radius: 22px;
background: #000;
}
.portrait-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.portrait-video-wrapper .video-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: #666;
font-size: 14px;
}
/* Video Info */
.portrait-video-info {
padding: 16px;
}
.portrait-video-info h4 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
line-height: 1.4;
}
.portrait-video-info p {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
}
/* Scroll Arrows */
.portrait-scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(45, 110, 62, 0.3);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.portrait-scroll-arrow:hover {
background: rgba(45, 110, 62, 0.1);
border-color: rgba(45, 110, 62, 0.5);
transform: translateY(-50%) scale(1.1);
}
.portrait-scroll-arrow.left {
left: 0;
}
.portrait-scroll-arrow.right {
right: 0;
}
.portrait-scroll-arrow svg {
width: 24px;
height: 24px;
color: var(--brand-green);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.portrait-video-section {
padding: 40px 0;
}
.portrait-video-section .container {
padding: 0 15px;
}
.portrait-videos-wrapper {
padding: 0 35px;
}
.portrait-video-card {
width: 240px;
}
.portrait-scroll-arrow {
width: 36px;
height: 36px;
}
.portrait-scroll-arrow svg {
width: 20px;
height: 20px;
}
.portrait-video-info h4 {
font-size: 14px;
}
.portrait-video-info p {
font-size: 13px;
}
}
@media (max-width: 480px) {
.portrait-videos-wrapper {
padding: 0 25px;
}
.portrait-video-card {
width: 200px;
}
.portrait-scroll-arrow {
width: 32px;
height: 32px;
}
.portrait-scroll-arrow svg {
width: 18px;
height: 18px;
}
}
/* Smooth scrolling animation */
@media (prefers-reduced-motion: no-preference) {
.portrait-videos-container {
scroll-behavior: smooth;
}
}
/* =============================
My Account Page Alignment
============================= */
.my-account-page {
padding: 40px 0;
}
.my-account-page .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.my-account-page .account-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
/* Personalized greeting - span across full width */
.my-account-page .account-content .gk-personalized-greeting {
grid-column: 1 / -1;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
padding: 32px;
border-radius: 16px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(45, 110, 62, 0.08);
}
.my-account-page .account-content .gk-personalized-greeting h2 {
font-size: 32px;
color: #2d6e3e;
margin: 0 0 8px 0;
font-weight: 600;
}
.my-account-page .account-content .gk-personalized-greeting p {
color: #666;
font-size: 16px;
margin: 0;
}
/* Navigation */
.woocommerce-MyAccount-navigation {
background: #ffffff;
padding: 24px;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
position: sticky;
top: 20px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 8px;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
color: #4b5563;
text-decoration: none;
border-radius: 10px;
transition: all 0.3s;
font-weight: 500;
font-size: 15px;
}
.woocommerce-MyAccount-navigation ul li a:before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: transparent;
transition: all 0.3s;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
background: linear-gradient(135deg, #2d6e3e 0%, #22543d 100%);
color: #ffffff;
box-shadow: 0 4px 12px rgba(45, 110, 62, 0.3);
}
.woocommerce-MyAccount-navigation ul li.is-active a:before {
background: #ffffff;
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: #f0fdf4;
color: #2d6e3e;
transform: translateX(4px);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
color: #dc2626;
margin-top: 16px;
border-top: 1px solid #f3f4f6;
padding-top: 20px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: #fef2f2;
color: #dc2626;
}
/* Content */
.woocommerce-MyAccount-content {
background: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
min-height: 500px;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
color: var(--brand-green);
margin-bottom: 20px;
}
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
margin-bottom: 20px;
}
/* Forms */
.woocommerce-MyAccount-content form .form-row {
margin-bottom: 20px;
}
.woocommerce-MyAccount-content form .form-row label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: 500;
}
.woocommerce-MyAccount-content form .form-row input[type="text"],
.woocommerce-MyAccount-content form .form-row input[type="email"],
.woocommerce-MyAccount-content form .form-row input[type="password"],
.woocommerce-MyAccount-content form .form-row input[type="tel"],
.woocommerce-MyAccount-content form .form-row textarea,
.woocommerce-MyAccount-content form .form-row select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.woocommerce-MyAccount-content form .form-row input[type="text"]:focus,
.woocommerce-MyAccount-content form .form-row input[type="email"]:focus,
.woocommerce-MyAccount-content form .form-row input[type="password"]:focus,
.woocommerce-MyAccount-content form .form-row input[type="tel"]:focus,
.woocommerce-MyAccount-content form .form-row textarea:focus,
.woocommerce-MyAccount-content form .form-row select:focus {
outline: none;
border-color: var(--brand-green);
}
/* Buttons */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
padding: 12px 24px;
background: var(--brand-green);
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
background: #245530;
}
/* Orders table */
.woocommerce-MyAccount-content .woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e3e3e3;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th {
background: #fff;
color: var(--brand-green);
font-weight: 600;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button {
padding: 8px 16px;
background: var(--brand-orange);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
display: inline-block;
transition: background 0.3s;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button:hover {
background: #d94d00;
}
/* Address grid */
.woocommerce-MyAccount-content .woocommerce-Address {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
display: inline-block;
margin-right: 10px;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
font-style: normal;
line-height: 1.8;
color: #666;
}
/* Responsive */
@media (max-width: 1200px) {
.my-account-page .container {
max-width: 100%;
padding: 0 16px;
}
.my-account-page .account-content {
grid-template-columns: 260px 1fr;
gap: 24px;
}
}
@media (max-width: 1024px) {
.my-account-page .account-content {
grid-template-columns: 240px 1fr;
gap: 20px;
}
.my-account-page .account-content .gk-personalized-greeting {
padding: 24px;
}
.my-account-page .account-content .gk-personalized-greeting h2 {
font-size: 28px;
}
}
@media (max-width: 768px) {
.my-account-page {
padding: 20px 0;
}
.my-account-page .account-content {
grid-template-columns: 1fr;
gap: 20px;
}
.my-account-page .account-content .gk-personalized-greeting {
padding: 20px;
border-radius: 12px;
}
.my-account-page .account-content .gk-personalized-greeting h2 {
font-size: 24px;
}
.woocommerce-MyAccount-navigation {
margin-bottom: 0;
position: static;
border-radius: 12px;
padding: 20px;
}
.woocommerce-MyAccount-content {
padding: 24px;
border-radius: 12px;
}
.woocommerce-MyAccount-content .woocommerce-Address {
grid-template-columns: 1fr;
}
.gk-form-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.my-account-page .account-content .gk-personalized-greeting {
padding: 16px;
}
.my-account-page .account-content .gk-personalized-greeting h2 {
font-size: 20px;
}
.my-account-page .account-content .gk-personalized-greeting p {
font-size: 14px;
}
.woocommerce-MyAccount-navigation {
padding: 16px;
}
.woocommerce-MyAccount-navigation ul li a {
padding: 12px 14px;
font-size: 14px;
}
.woocommerce-MyAccount-content {
padding: 16px;
}
}
/* My Account: hide default page title */
.woocommerce-account .page-title,
.woocommerce-account .entry-title,
.woocommerce-account .wp-block-post-title,
.woocommerce-account .wp-block-heading:first-of-type {
display: none !important;
}
/* Prevent generic Woo page header wrappers above hero */
.woocommerce-account .page-header,
.woocommerce-account .entry-header {
display: none !important;
}
/* Remove top gap on My Account when logged out */
body:not(.logged-in).woocommerce-account .my-account-page {
padding-top: 0 !important;
}
body:not(.logged-in).woocommerce-account .woocommerce-MyAccount-content {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Browse Categories Dropdown Visibility */
.browse-categories .categories-dropdown {
display: none !important;
}
.browse-categories.open .categories-dropdown {
display: block !important;
}
/* Fix for visual gap between variations table and stock information on product pages */
.single-product table.variations {
margin-bottom: 3px !important;
/* Further reduced from 8px to 3px for even tighter spacing */
margin-top: 3px !important;
/* Add small top margin for spacing from stock status */
}
.single-product table.variations tr {
display: flex;
align-items: center;
gap: 0 !important;
/* Gap removed completely */
flex-wrap: nowrap;
}
.single-product table.variations th,
.single-product table.variations td {
padding: 0 !important;
border: 0;
}
.single-product table.variations th {
width: auto;
min-width: unset;
margin: 0;
padding-right: 0 !important;
display: inline-flex;
align-items: center;
white-space: nowrap;
flex: 0 0 auto;
max-width: max-content;
}
.single-product table.variations th.label {
flex: 0 0 auto !important;
max-width: max-content !important;
}
.single-product table.variations th label {
display: inline-flex;
align-items: center;
gap: 0;
margin: 0 !important;
font-weight: 600;
text-transform: capitalize;
white-space: nowrap;
line-height: 1;
}
.single-product table.variations td {
flex: 1 1 auto;
}
.single-product table.variations td.value {
display: flex;
align-items: center;
gap: 4px;
}
.single-product .single_variation_wrap {
margin-top: 3px !important;
/* Further reduced from 8px to 3px for even tighter spacing */
}
.single-product table.variations select {
margin: 0 !important;
background: #fff !important;
color: #111827 !important;
}
/* Force variation label to hug content (override product-unified/table defaults) */
body.single-product .variations_form .variations th.label,
body.single-product .variations_form .variations td.label {
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
padding-right: 0 !important;
padding-left: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
}
body.single-product .variations_form .variations td.value {
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
/* Collapse variation row into a true inline flex row (label + select on one line) */
body.single-product .variations_form .variations,
body.single-product .variations_form .variations tbody,
body.single-product .variations_form .variations tr {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
}
body.single-product .variations_form .variations th,
body.single-product .variations_form .variations td {
display: flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
flex: 0 0 auto !important;
}
body.single-product .variations_form .variations td.value {
flex: 1 1 auto !important;
max-width: none !important;
}
body.single-product .variations_form .variations select {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
background: #fff !important;
color: #111827 !important;
}
@media (max-width: 640px) {
body.single-product .cart,
body.single-product-page .cart,
body.single-product form.cart,
body.single-product-page form.cart,
body.single-product .woocommerce-variation-add-to-cart,
body.single-product-page .woocommerce-variation-add-to-cart {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
overflow-x: visible !important;
/* Allow overflow but prioritize layout */
width: auto !important;
max-width: 100%;
}
body.single-product .cart .single_add_to_cart_button,
body.single-product-page .cart .single_add_to_cart_button,
body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
body.single-product-page .woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 0 1 auto !important;
width: auto !important;
white-space: nowrap !important;
margin-right: 0 !important;
/* Reset margin */
order: 2 !important;
}
body.single-product .cart .quantity,
body.single-product-page .cart .quantity,
body.single-product .woocommerce-variation-add-to-cart .quantity,
body.single-product-page .woocommerce-variation-add-to-cart .quantity {
flex: 0 0 auto !important;
width: auto !important;
white-space: nowrap !important;
margin: 0 8px 0 0 !important;
/* Space between quantity and button */
order: 1 !important;
}
}
/* Keep product tabs horizontal on mobile (force flex/nowrap) */
@media (max-width: 768px) {
.single-product .woocommerce-tabs ul.tabs {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 0;
}
.single-product .woocommerce-tabs ul.tabs li {
display: flex !important;
flex: 0 0 auto !important;
}
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs .tab-link {
display: inline-flex !important;
align-items: center;
padding: 10px 14px !important;
white-space: nowrap !important;
margin: 0 !important;
}
}
/* Tighter tab spacing (all viewports) */
.single-product .woocommerce-tabs ul.tabs {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0 !important;
padding: 0;
margin: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.single-product .woocommerce-tabs ul.tabs li {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
border: 0 !important;
background: transparent !important;
list-style: none !important;
box-sizing: border-box !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
display: none !important;
content: none !important;
}
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs .tab-link {
display: inline-flex;
align-items: center;
padding: 10px 12px;
margin: 0 !important;
line-height: 1.2;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
color: #666 !important;
text-decoration: none !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs .tab-link.active {
color: #2d6e3e !important;
border-bottom-color: #2d6e3e !important;
background: transparent !important;
}
.single-product .woocommerce-variation-availability {
margin-bottom: 0px !important;
/* Remove bottom margin to eliminate gap */
}
/* Hide the redundant stock count text (e.g., "200 in stock") */
/* For variation products */
.single-product .woocommerce-variation-availability .stock.in-stock {
display: none !important;
}
.single-product .woocommerce-variation-availability p.stock.in-stock {
display: none !important;
}
body.single-product .woocommerce-variation-availability .stock.in-stock {
display: none !important;
}
body.single-product div.woocommerce-variation-availability p.stock.in-stock {
display: none !important;
}
/* For simple products - hide default WooCommerce stock display */
.single-product div.product form.cart .stock {
display: none !important;
}
.single-product div.product form.cart p.stock {
display: none !important;
}
.single-product .product form.cart .stock.in-stock {
display: none !important;
}
/* Hide any WooCommerce generated stock HTML on single product pages */
body.single-product .woocommerce-product-details__short-description+.stock {
display: none !important;
}
/* ========================================
MY ACCOUNT PAGE - RESPONSIVE FIX
======================================== */
/* Ensure my-account page has proper container width */
.woocommerce-account .my-account-page .container,
.page-id-10 .my-account-page .container {
max-width: 1400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
/* Force grid layout on desktop */
.woocommerce-account .account-content,
.page-id-10 .account-content {
display: grid !important;
grid-template-columns: 280px 1fr !important;
gap: 32px !important;
width: 100% !important;
}
/* Ensure content area takes full width */
.woocommerce-account .woocommerce-MyAccount-content,
.page-id-10 .woocommerce-MyAccount-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Responsive breakpoints */
@media (max-width: 1200px) {
.woocommerce-account .account-content,
.page-id-10 .account-content {
grid-template-columns: 250px 1fr !important;
gap: 24px !important;
}
}
@media (max-width: 992px) {
.woocommerce-account .account-content,
.page-id-10 .account-content {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
@media (max-width: 768px) {
.woocommerce-account .my-account-page .container,
.page-id-10 .my-account-page .container {
padding: 0 16px !important;
}
}
/* ========================================
NEW FOOTER DESIGN
======================================== */
.site-footer.new-design {
background-color: #0d3b21;
/* Deep organic green */
color: #e2e8f0;
padding: 0 0 40px 0;
position: relative;
margin-top: 80px;
font-family: 'Quicksand', sans-serif;
}
.footer-wave {
position: absolute;
top: -119px;
/* Overlap slightly to avoid gaps */
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: 1;
pointer-events: none;
}
.footer-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 120px;
transform: rotateY(180deg);
}
.footer-wave path {
fill: #0d3b21;
}
.site-footer.new-design .container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
.footer-main-content {
display: grid;
grid-template-columns: 1.5fr 1fr 2.2fr;
gap: 60px;
padding-top: 40px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Brand Column */
.footer-col.brand-col {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-logo img {
height: 80px;
/* Increased from 60px */
width: auto;
}
.brand-desc {
font-size: 16px;
line-height: 1.6;
color: #cbd5e1;
margin: 0;
max-width: 360px;
}
.social-links {
display: flex;
gap: 16px;
margin-top: 8px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
color: #fff;
border: 1px solid transparent;
transition: all 0.3s ease;
}
.social-icon svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
color: #fff;
}
.social-icon:hover svg {
transform: scale(1.05);
}
.social-facebook {
color: #1877f2;
border-color: rgba(24, 119, 242, 0.35);
background: rgba(24, 119, 242, 0.12);
}
.social-facebook:hover {
background: #1877f2;
box-shadow: 0 5px 18px rgba(24, 119, 242, 0.45);
}
.social-instagram {
color: #c13584;
border-color: rgba(193, 53, 132, 0.35);
background: linear-gradient(135deg, rgba(249, 206, 52, 0.12), rgba(238, 42, 123, 0.12), rgba(98, 40, 215, 0.12));
}
.social-instagram:hover {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
box-shadow: 0 5px 18px rgba(214, 36, 159, 0.45);
}
.social-twitter {
color: #1da1f2;
border-color: rgba(29, 161, 242, 0.35);
background: rgba(29, 161, 242, 0.12);
}
.social-twitter:hover {
background: #1da1f2;
box-shadow: 0 5px 18px rgba(29, 161, 242, 0.45);
}
.social-youtube {
color: #ff0000;
border-color: rgba(255, 0, 0, 0.35);
background: rgba(255, 0, 0, 0.12);
}
.social-youtube:hover {
background: #ff0000;
box-shadow: 0 5px 18px rgba(255, 0, 0, 0.5);
}
/* Links Columns */
.footer-col h3 {
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 24px;
position: relative;
display: inline-block;
}
.footer-col h3::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: #f05c0c;
border-radius: 2px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin-bottom: 14px;
}
.footer-col ul li a {
color: #cbd5e1;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.footer-col ul li a:hover {
color: #f05c0c;
transform: translateX(5px);
}
/* Contact Column */
.contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
.contact-item .icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(240, 92, 12, 0.15);
color: #f05c0c;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-item:hover .icon {
background: #f05c0c;
color: #fff;
}
.contact-item p {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #cbd5e1;
}
/* Footer Bottom */
.footer-bottom-new {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom-new p {
margin: 0;
font-size: 14px;
color: #94a3b8;
}
.payment-icons-new {
display: flex;
gap: 12px;
align-items: center;
}
.pay-icon {
width: 45px;
height: auto;
border-radius: 4px;
background: #fff;
padding: 2px;
transition: transform 0.3s ease;
}
.pay-icon:hover {
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 1024px) {
.footer-main-content {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-col.brand-col {
grid-column: span 2;
max-width: 100%;
}
}
@media (max-width: 640px) {
.footer-main-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-col.brand-col {
grid-column: span 1;
}
.footer-bottom-new {
flex-direction: column;
text-align: center;
}
}
/* Animations */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}
.footer-logo img {
animation: float 6s ease-in-out infinite;
}
/* ========================================
INTEGRATED FEATURES & NEWSLETTER SECTION
======================================== */
.integrated-features-newsletter {
padding: 80px 0;
background: #ffffff;
position: relative;
}
/* Features Grid */
.features-wrapper {
margin-bottom: 0;
/* Removed bottom margin as newsletter is moved */
}
.features-grid-new {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
}
.feature-card-new {
background: #ffffff;
padding: 30px 20px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
.feature-card-new:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.feature-icon-box {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.feature-card-new:hover .feature-icon-box {
transform: scale(1.1) rotate(5deg);
}
/* Icon Colors */
.icon-truck {
background: #e0f2fe;
color: #0284c7;
}
.icon-shield {
background: #dcfce7;
color: #16a34a;
}
.icon-leaf {
background: #fef9c3;
color: #ca8a04;
}
.icon-clock {
background: #fee2e2;
color: #dc2626;
}
.feature-card-new h4 {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.feature-card-new p {
font-size: 14px;
color: #64748b;
line-height: 1.5;
margin: 0;
}
/* Newsletter Banner (Now in Footer) */
.newsletter-banner-new {
background: linear-gradient(135deg, #15803d 0%, #0d3b21 100%);
/* Slightly adjusted gradient for footer context */
border-radius: 24px;
padding: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
margin-bottom: 60px;
/* Add spacing below newsletter in footer */
}
.newsletter-content-new {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.newsletter-text {
flex: 1;
color: #ffffff;
}
.newsletter-text h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
color: #ffffff;
}
.newsletter-text p {
font-size: 16px;
opacity: 0.9;
margin: 0;
max-width: 500px;
}
.newsletter-form-new {
flex: 1;
max-width: 500px;
}
.input-group-new {
display: flex;
background: #ffffff;
padding: 6px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.input-group-new input {
flex: 1;
border: none;
padding: 12px 20px;
font-size: 16px;
outline: none;
background: transparent;
color: #334155;
}
.input-group-new button {
background: #f97316;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.input-group-new button:hover {
background: #ea580c;
transform: translateX(2px);
}
/* Decoration */
.newsletter-decoration {
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
pointer-events: none;
}
/* Footer Logo Updates - Character Animation */
.footer-logo {
margin-bottom: 25px;
background: transparent;
position: relative;
display: inline-block;
z-index: 1;
padding-top: 40px;
/* Space for character jump */
}
.main-logo-img {
height: auto;
width: 220px;
max-width: 100%;
position: relative;
z-index: 2;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}
.logo-character {
position: absolute;
top: 0;
left: 20px;
width: 50px;
height: 50px;
z-index: 1;
animation: character-adventure 10s ease-in-out infinite;
transform-origin: center center;
}
.logo-character img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
background: transparent !important;
box-shadow: none !important;
/* Lively bouncing walk: a springy hop layered with a gentle tilt, so the
mascot reads as a real little character instead of a flat sway. */
animation: character-hop 0.42s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate,
character-tilt 1.1s ease-in-out infinite;
transform-origin: bottom center;
}
@keyframes character-hop {
0% { transform: translateY(0) scaleY(1); }
60% { transform: translateY(-6px) scaleY(1.04); }
100% { transform: translateY(-9px) scaleY(0.97); }
}
@keyframes character-tilt {
0%, 100% { rotate: -6deg; }
50% { rotate: 6deg; }
}
@media (prefers-reduced-motion: reduce) {
.logo-character,
.logo-character img { animation: none !important; }
}
@keyframes character-adventure {
0% {
transform: translate(0, 0) scale(0);
opacity: 0;
z-index: 1;
}
5% {
transform: translate(10px, -20px) scale(1);
/* Start Top Left */
opacity: 1;
}
15% {
transform: translate(50px, 10px) scale(0.8);
/* Behind 'G' */
z-index: 1;
}
25% {
transform: translate(80px, -10px) scale(1);
/* Front of 'r' */
z-index: 3;
}
35% {
transform: translate(120px, 20px) scale(0.8);
/* Inside 'o' loop */
z-index: 1;
}
45% {
transform: translate(160px, -10px) scale(1) rotate(10deg);
/* Top Right */
z-index: 3;
}
55% {
transform: translate(180px, 60px) scale(0.8);
/* Drop to 'N' in KARNA */
z-index: 1;
}
65% {
transform: translate(120px, 80px) scale(1);
/* Front of 'R' in KARNA */
z-index: 3;
}
75% {
transform: translate(60px, 60px) scale(0.8);
/* Behind 'A' in KARNA */
z-index: 1;
}
85% {
transform: translate(20px, 80px) scale(1) rotate(-5deg);
/* Front of 'K' in KARNA */
z-index: 3;
}
95% {
transform: translate(0, 40px) scale(1);
/* Move back up */
}
100% {
transform: translate(0, 0) scale(0);
/* Reset */
opacity: 0;
}
}
/* Hover Interaction */
.footer-logo:hover .logo-character {
animation-play-state: paused;
transform: translate(90px, -50px) scale(1.5) rotate(-10deg);
opacity: 1;
z-index: 3;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer-logo:hover .main-logo-img {
transform: scale(1.02);
transition: transform 0.3s ease;
}
/* Responsive */
@media (max-width: 1024px) {
.features-grid-new {
grid-template-columns: repeat(2, 1fr);
}
.newsletter-content-new {
flex-direction: column;
text-align: center;
}
.newsletter-text p {
margin: 0 auto;
}
.newsletter-form-new {
width: 100%;
}
}
@media (max-width: 640px) {
.features-grid-new {
grid-template-columns: 1fr;
}
.newsletter-banner-new {
padding: 30px 20px;
}
.newsletter-text h3 {
font-size: 24px;
}
.input-group-new {
flex-direction: column;
padding: 12px;
gap: 12px;
}
.input-group-new button {
width: 100%;
justify-content: center;
}
.footer-logo img {
width: 180px;
/* Slightly smaller on mobile but still prominent */
}
}
/* Payment Icons Official */
.payment-icons-official {
display: flex;
align-items: center;
gap: 15px;
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
}
.pay-icon-img {
height: 32px !important;
/* Enforce height */
width: auto;
object-fit: contain;
filter: none;
opacity: 1;
background: transparent;
/* Removed background */
padding: 0;
/* Removed padding */
border-radius: 0;
transition: all 0.3s ease;
}
.pay-icon-img:hover {
transform: scale(1.1);
}
.pay-badge {
background: transparent;
/* Removed background */
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(255, 255, 255, 0.3);
/* Kept border for visibility */
transition: all 0.3s ease;
height: 32px;
display: flex;
align-items: center;
}
.pay-badge:hover {
background: #fff;
color: #0d3b21;
border-color: #fff;
}
@media (max-width: 640px) {
.payment-icons-official {
gap: 10px;
}
}
/* Powered By Logo */
.powered-by-logo {
height: 14px;
/* Reduced to match text height */
width: auto;
vertical-align: middle;
margin-left: 5px;
filter: brightness(0) invert(1);
/* Make it white */
opacity: 0.8;
display: inline-block;
/* Force inline display */
position: relative;
top: -1px;
/* Slight adjustment for visual alignment */
}
/* Footer Logo Adjustments */
.footer-logo {
margin-bottom: 5px;
/* Reduced from 30px to bring text closer */
text-align: left;
/* Ensure left alignment */
padding: 0;
/* Remove padding */
width: 100%;
/* Ensure container is full width */
}
.footer-logo img {
height: auto;
/* Allow height to adjust */
width: 75%;
/* Reduced by 25% from 100% */
max-width: 100%;
/* Allow it to fill the column */
display: block;
padding: 0;
/* Remove padding */
margin: 0;
/* Remove margin */
object-fit: contain;
/* Ensure aspect ratio is preserved */
animation: float 6s ease-in-out infinite, glow 4s ease-in-out infinite;
/* Combined float and glow */
}
@keyframes glow {
0%,
100% {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
}
50% {
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}
}
@media (max-width: 768px) {
.footer-logo img {
max-width: 200px;
/* Keep it smaller on mobile */
}
}
/* ========================================
WHY CHOOSE GROKARNA - CREATIVE BENTO BOX DESIGN
======================================== */
.why-choose-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8fffe 0%, #ffffff 50%, #f0fdf4 100%);
position: relative;
overflow: hidden;
}
/* Minimal variant */
.why-choose-section.minimal {
padding: 24px 0;
background: #ffffff;
}
.why-choose-section.minimal .floating-shapes,
.why-choose-section.minimal .shape,
.why-choose-section.minimal .card-glow,
.why-choose-section.minimal .card-number,
.why-choose-section.minimal .card-decoration {
display: none !important;
}
.why-choose-section.minimal .section-header-creative {
margin-bottom: 12px;
}
.why-choose-section.minimal .section-badge {
padding: 4px 10px;
font-size: 12px;
box-shadow: none;
}
.why-choose-section.minimal .section-title-creative {
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
}
.why-choose-section.minimal .section-subtitle-creative {
font-size: 13px;
color: #666;
max-width: none;
}
.why-choose-section.minimal .bento-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.why-choose-section.minimal .bento-card {
padding: 12px;
border-radius: 12px;
box-shadow: none;
border: 1px solid #eee;
cursor: default;
transition: none;
}
.why-choose-section.minimal .bento-card:hover {
transform: none;
box-shadow: none;
border-color: #eee;
}
.why-choose-section.minimal .icon-wrapper {
width: 40px;
height: 40px;
border-radius: 8px;
margin-bottom: 8px;
}
.why-choose-section.minimal .icon-wrapper svg {
width: 20px;
height: 20px;
}
.why-choose-section.minimal .bento-card h3 {
font-size: 14px;
margin-bottom: 6px;
}
.why-choose-section.minimal .bento-card p {
font-size: 12px;
line-height: 1.4;
}
.why-choose-section.minimal .bento-large,
.why-choose-section.minimal .bento-medium {
grid-column: auto;
}
@media (max-width: 640px) {
.why-choose-section.minimal .bento-grid {
grid-template-columns: 1fr;
}
}
/* Floating Background Shapes */
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.4;
animation: float-shape 20s ease-in-out infinite;
}
.shape-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
top: 10%;
left: 5%;
animation-delay: 0s;
}
.shape-2 {
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
top: 60%;
right: 10%;
animation-delay: 5s;
}
.shape-3 {
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(21, 128, 61, 0.1) 0%, transparent 70%);
bottom: 10%;
left: 50%;
animation-delay: 10s;
}
@keyframes float-shape {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -30px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
/* Section Header */
.section-header-creative {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.section-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 16px;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.section-title-creative {
font-size: 48px;
font-weight: 800;
color: #1e293b;
margin-bottom: 16px;
line-height: 1.2;
}
.highlight-text {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle-creative {
font-size: 18px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Bento Grid Layout */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
.bento-card {
position: relative;
border-radius: 24px;
padding: 40px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.bento-large {
grid-column: span 2;
}
.bento-medium {
grid-column: span 2;
}
/* Card Hover Effects */
.bento-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
border-color: rgba(16, 185, 129, 0.3);
}
.bento-card[data-tilt]:hover {
transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
}
/* Card Glow Effect */
.card-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.bento-card:hover .card-glow {
opacity: 1;
}
/* Card Number */
.card-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 72px;
font-weight: 900;
color: rgba(16, 185, 129, 0.05);
line-height: 1;
transition: all 0.4s ease;
}
.bento-card:hover .card-number {
color: rgba(16, 185, 129, 0.1);
transform: scale(1.1);
}
/* Card Content */
.card-content {
position: relative;
z-index: 2;
}
/* Icon Wrapper */
.icon-wrapper {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover .icon-wrapper {
transform: scale(1.1) rotate(5deg);
}
.icon-truck-new {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e40af;
}
.icon-shield-new {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #15803d;
}
.icon-leaf-new {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #b45309;
}
.icon-clock-new {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #b91c1c;
}
.icon-wrapper svg {
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* Card Text */
.bento-card h3 {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.bento-card:hover h3 {
color: #10b981;
}
.bento-card p {
font-size: 15px;
color: #64748b;
line-height: 1.7;
margin: 0;
}
/* Card Decoration */
.card-decoration {
position: absolute;
bottom: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
}
.bento-card:hover .card-decoration {
opacity: 1;
}
/* Responsive Design */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.bento-large,
.bento-medium {
grid-column: span 1;
}
.section-title-creative {
font-size: 40px;
}
}
@media (max-width: 640px) {
.why-choose-section {
padding: 60px 0;
}
.bento-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.bento-card {
padding: 30px;
}
.section-title-creative {
font-size: 32px;
}
.section-subtitle-creative {
font-size: 16px;
}
.card-number {
font-size: 48px;
}
}
/* ========================================
NEWSLETTER - CREATIVE SPLIT SCREEN DESIGN
======================================== */
.newsletter-creative {
display: grid;
grid-template-columns: 1fr 1.2fr;
border-radius: 32px;
overflow: hidden;
margin-bottom: 60px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
min-height: 400px;
}
/* Minimal variant */
.newsletter-creative.minimal {
display: block;
border-radius: 12px;
box-shadow: none;
border: 1px solid #eee;
min-height: auto;
}
.newsletter-creative.minimal .newsletter-visual,
.newsletter-creative.minimal .organic-shapes,
.newsletter-creative.minimal .leaf-pattern {
display: none !important;
}
.newsletter-creative.minimal .newsletter-form-side {
padding: 16px;
}
.newsletter-creative.minimal .form-badge {
padding: 4px 10px;
font-size: 11px;
margin-bottom: 8px;
}
.newsletter-creative.minimal .form-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.newsletter-creative.minimal .form-description {
font-size: 12px;
margin-bottom: 10px;
}
.newsletter-creative.minimal .input-wrapper-creative {
border-radius: 8px;
padding: 4px;
}
.newsletter-creative.minimal .input-wrapper-creative input {
padding: 10px 12px 10px 36px;
font-size: 14px;
}
.newsletter-creative.minimal .input-icon {
left: 12px;
}
.newsletter-creative.minimal .submit-btn-creative {
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
box-shadow: none;
}
/* Left Side - Visual */
.newsletter-visual {
background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
padding: 60px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Organic Shapes */
.organic-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.organic-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: organic-float 15s ease-in-out infinite;
}
.organic-1 {
width: 200px;
height: 200px;
top: -50px;
left: -50px;
animation-delay: 0s;
}
.organic-2 {
width: 150px;
height: 150px;
bottom: -30px;
right: -30px;
animation-delay: 5s;
}
.organic-3 {
width: 100px;
height: 100px;
top: 50%;
right: 20%;
animation-delay: 10s;
}
@keyframes organic-float {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
50% {
transform: translate(20px, -20px) scale(1.2);
opacity: 0.5;
}
}
/* Leaf Pattern */
.leaf-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.leaf {
position: absolute;
width: 120px;
height: 120px;
opacity: 0.6;
animation: leaf-sway 8s ease-in-out infinite;
}
.leaf-1 {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.leaf-2 {
bottom: 25%;
right: 20%;
animation-delay: 4s;
}
@keyframes leaf-sway {
0%,
100% {
transform: rotate(0deg) translateY(0);
}
50% {
transform: rotate(10deg) translateY(-10px);
}
}
/* Visual Text */
.visual-text {
position: relative;
z-index: 2;
text-align: center;
color: white;
}
.visual-text h3 {
font-size: 48px;
font-weight: 800;
margin-bottom: 8px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.visual-text p {
font-size: 18px;
opacity: 0.9;
}
/* Right Side - Form */
.newsletter-form-side {
background: white;
padding: 60px;
display: flex;
align-items: center;
}
.form-content {
width: 100%;
}
.form-badge {
display: inline-block;
padding: 6px 16px;
background: rgba(16, 185, 129, 0.1);
color: #059669;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.form-title {
font-size: 36px;
font-weight: 800;
color: #1e293b;
margin-bottom: 12px;
line-height: 1.2;
}
.gradient-text {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-description {
font-size: 16px;
color: #64748b;
line-height: 1.6;
margin-bottom: 32px;
}
/* Newsletter Form */
.newsletter-form-creative {
width: 100%;
}
.input-wrapper-creative {
position: relative;
display: flex;
align-items: center;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 6px;
transition: all 0.3s ease;
margin-bottom: 16px;
}
.input-wrapper-creative:focus-within {
background: white;
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
.input-icon {
position: absolute;
left: 20px;
color: #94a3b8;
transition: color 0.3s ease;
pointer-events: none;
}
.input-wrapper-creative:focus-within .input-icon {
color: #10b981;
}
.input-wrapper-creative input {
flex: 1;
border: none;
background: transparent;
padding: 16px 20px 16px 50px;
font-size: 16px;
color: #1e293b;
outline: none;
}
.input-wrapper-creative input::placeholder {
color: #94a3b8;
}
.submit-btn-creative {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.submit-btn-creative:hover {
transform: translateX(4px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.submit-btn-creative svg {
transition: transform 0.3s ease;
}
.submit-btn-creative:hover svg {
transform: translateX(4px);
}
.form-note {
font-size: 14px;
color: #64748b;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-creative {
grid-template-columns: 1fr;
}
.newsletter-visual {
min-height: 300px;
padding: 40px;
}
.visual-text h3 {
font-size: 36px;
}
.newsletter-form-side {
padding: 40px;
}
.form-title {
font-size: 28px;
}
}
@media (max-width: 640px) {
.newsletter-creative {
border-radius: 20px;
margin-bottom: 40px;
}
.newsletter-visual {
padding: 30px;
min-height: 250px;
}
.visual-text h3 {
font-size: 28px;
}
.visual-text p {
font-size: 16px;
}
.newsletter-form-side {
padding: 30px;
}
.form-title {
font-size: 24px;
}
.form-description {
font-size: 14px;
}
.input-wrapper-creative {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.input-wrapper-creative input {
padding: 14px 20px 14px 50px;
}
.submit-btn-creative {
width: 100%;
justify-content: center;
}
}
/* =========================================
Minimal Redesign Styles
========================================= */
/* Why Choose Grokarna - Minimal */
.why-choose-minimal {
padding: 80px 0;
background: #ffffff;
}
.section-header-minimal {
margin-bottom: 60px;
}
.minimal-badge {
display: inline-block;
background: #f0fdf4;
color: var(--brand-green);
padding: 6px 16px;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.section-header-minimal h2 {
font-size: 42px;
color: var(--text-dark);
margin-bottom: 12px;
font-weight: 700;
}
.section-header-minimal p {
font-size: 18px;
color: var(--text-gray);
}
.features-minimal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.feature-minimal-card {
text-align: center;
padding: 40px 20px;
border-radius: 24px;
background: #f9fafb;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.feature-minimal-card:hover {
background: #ffffff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border-color: #f0fdf4;
transform: translateY(-5px);
}
.feature-icon-box {
width: 64px;
height: 64px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: var(--brand-green);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.feature-minimal-card:hover .feature-icon-box {
background: var(--brand-green);
color: #ffffff;
transform: scale(1.1) rotate(5deg);
}
.feature-minimal-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text-dark);
}
.feature-minimal-card p {
font-size: 15px;
color: var(--text-gray);
line-height: 1.5;
}
/* Newsletter Minimal */
.newsletter-minimal {
padding: 80px 0;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
}
.newsletter-minimal-content {
background: #ffffff;
border-radius: 30px;
padding: 60px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.newsletter-minimal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, var(--brand-green), #4ade80);
}
.newsletter-text {
max-width: 400px;
}
.newsletter-text h3 {
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
color: var(--text-dark);
}
.newsletter-text p {
font-size: 18px;
color: var(--text-gray);
}
.newsletter-minimal-form {
flex: 1;
max-width: 500px;
}
.input-group-minimal {
display: flex;
background: #f3f4f6;
border-radius: 16px;
padding: 6px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.input-group-minimal:focus-within {
background: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(45, 110, 62, 0.1);
}
.input-group-minimal input {
flex: 1;
border: none;
background: transparent;
padding: 12px 20px;
font-size: 16px;
color: var(--text-dark);
outline: none;
}
.input-group-minimal button {
background: var(--brand-green);
color: #ffffff;
border: none;
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.input-group-minimal button:hover {
background: #1e4a2b;
transform: translateX(2px);
}
/* Responsive */
@media (max-width: 1024px) {
.features-minimal-grid {
grid-template-columns: repeat(2, 1fr);
}
.newsletter-minimal-content {
flex-direction: column;
text-align: center;
padding: 40px 30px;
gap: 30px;
}
.newsletter-minimal-content::before {
width: 100%;
height: 6px;
}
.newsletter-text {
max-width: 100%;
}
.newsletter-minimal-form {
width: 100%;
}
}
@media (max-width: 640px) {
.features-minimal-grid {
grid-template-columns: 1fr;
}
.section-header-minimal h2 {
font-size: 32px;
}
}
/* =========================================
Compact Newsletter Styles (Footer Integration)
========================================= */
.footer-right-group {
display: flex;
flex-direction: column;
gap: 30px;
}
.footer-links-row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
}
.newsletter-compact {
/* grid-column: 3 / -1; Removed as it's now inside the flex container */
margin-top: 0;
/* Removed margin as gap is handled by flex container */
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.newsletter-content-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 2;
}
.newsletter-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 8px;
width: fit-content;
}
.newsletter-text-content h3 {
font-size: 20px;
color: #fff;
margin: 0 0 8px 0;
font-weight: 700;
line-height: 1.3;
}
.newsletter-text-content p {
font-size: 14px;
color: #94a3b8;
margin: 0;
line-height: 1.5;
}
.newsletter-form-compact {
display: flex;
gap: 8px;
margin-top: 8px;
}
.input-group-compact {
display: flex;
width: 100%;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.input-group-compact:focus-within {
background: rgba(255, 255, 255, 0.1);
border-color: #10b981;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.input-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
color: #64748b;
}
.input-group-compact input {
flex: 1;
background: transparent;
border: none;
color: #fff;
padding: 10px 0;
font-size: 14px;
outline: none;
width: 100%;
}
.input-group-compact input::placeholder {
color: #64748b;
}
.submit-btn-compact {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: 0 16px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.submit-btn-compact:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.form-micro-copy {
font-size: 11px;
color: #64748b;
margin: 8px 0 0 0;
display: flex;
align-items: center;
gap: 4px;
}
/* Decorative Elements */
.compact-decor-1 {
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.compact-decor-2 {
position: absolute;
bottom: -30px;
left: -30px;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.footer-main-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-right-group {
gap: 40px;
}
.newsletter-compact {
margin-top: 0;
}
}
@media (max-width: 640px) {
.footer-links-row {
grid-template-columns: 1fr;
gap: 30px;
}
}