/* ============================================
   Alveera Jewellery - Shared Responsive Styles
   Optimized for PC, Tablet, and Mobile
   ============================================ */

/* ============================================
   FOOTER - PC/DESKTOP OPTIMIZATION (1200px+)
   ============================================ */
@media (min-width: 1200px) {
.footer {
padding: 80px 60px 40px !important;
    background: #fdf5ec;
}

.footer-content {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 60px !important;
max-width: 1400px !important;
margin: 0 auto !important;
}

.footer-column {
text-align: left !important;
}

.footer-column h4 {
font-size: 18px !important;
margin-bottom: 25px !important;
color: #721121 !important;
font-weight: 600 !important;
}

.footer-links li {
margin-bottom: 15px !important;
}

.footer-links a {
color: rgba(114, 17, 33, 0.8) !important;
text-decoration: none !important;
font-size: 15px !important;
transition: all 0.3s ease !important;
display: inline-block !important;
}

.footer-links a:hover {
color: #721121 !important;
transform: translateX(5px) !important;
}

/* Logo */
.footer-logo img {
height: 70px !important;
width: auto !important;
}

/* Social Icons */
.social-icons {
margin-top: 25px !important;
}

.social-icons a {
width: 45px !important;
height: 45px !important;
font-size: 20px !important;
}

/* Footer Bottom */
.footer-bottom {
border-top: 2px solid #e8d5c0 !important;
padding-top: 30px !important;
margin-top: 40px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 20px !important;
}

.footer-copyright {
font-size: 14px !important;
color: rgba(114, 17, 33, 0.7) !important;
}

.trust-badges {
display: flex !important;
gap: 25px !important;
}

.badge {
font-size: 13px !important;
color: rgba(114, 17, 33, 0.7) !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
}

/* ============================================
LAPTOP/TABLET (992px - 1199px)
============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
.footer {
padding: 60px 40px 30px !important;
}

.footer-content {
grid-template-columns: repeat(4, 1fr) !important;
gap: 40px !important;
}

.footer-column h4 {
font-size: 16px !important;
}

.footer-links a {
font-size: 14px !important;
}

.footer-logo img {
height: 60px !important;
}

.social-icons a {
width: 40px !important;
height: 40px !important;
font-size: 18px !important;
}
}
/* ============================================
   BASE STYLES (PC - 1200px+)
   ============================================ */

/* Logo */
.logo-image {
height: 80px;
width: auto;
max-width: 220px;
object-fit: contain;
}

/* Navigation */
.navbar-top {
padding: 20px 40px;
}

.nav-links {
display: flex;
gap: 30px;
}

.hamburger-menu {
display: none;
}

/* Product Grids - 4 columns on PC */
.products-grid,
.category-products-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
}

/* Footer Grid - 4 columns on PC */
.footer-content {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 40px !important;
}

/* ============================================
   LARGE TABLET (max-width: 1200px)
   ============================================ */
@media (max-width: 1200px) {
.navbar-top {
padding: 18px 30px;
}

.nav-links {
gap: 25px;
}

.products-grid,
.category-products-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}

.footer-content {
gap: 35px;
}
}

/* ============================================
   TABLET (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
.navbar-top {
padding: 15px 25px;
}

.products-grid,
.category-products-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
}

.footer-content {
grid-template-columns: repeat(2, 1fr) !important;
gap: 30px;
}

.footer-bottom {
flex-wrap: wrap;
gap: 15px;
}

/* Product cards */
.product-card {
border-radius: 8px;
}

.product-name {
font-size: 15px;
}

.product-price {
font-size: 17px;
}
}

/* ============================================
   TABLET SMALL (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
/* Logo */
.logo-image {
height: 65px;
max-width: 180px;
}

/* Navigation */
.navbar-top {
padding: 15px 20px;
gap: 15px;
}

.search-bar {
display: none !important;
}

.nav-links {
display: none !important;
}

.hamburger-menu {
display: block !important;
}

.announcement-bar {
font-size: 11px;
padding: 10px 15px;
}

.logo-main {
font-size: 26px;
}

.logo-sub {
font-size: 9px;
}

.nav-icon {
font-size: 20px;
}

/* Product Grids - 2 columns */
.products-grid,
.category-products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

/* Footer */
.footer {
padding: 50px 20px;
}

.footer-content {
grid-template-columns: 1fr 1fr !important;
gap: 30px;
}

.footer-bottom {
flex-direction: column;
text-align: center;
gap: 15px;
}

/* Product cards */
.product-card {
border-radius: 6px;
}

.product-image {
border-radius: 6px 6px 0 0;
}

.product-name {
font-size: 14px;
line-height: 1.3;
}

.product-price {
font-size: 15px;
}

.product-metal {
font-size: 10px;
}

.add-to-cart {
font-size: 11px;
padding: 10px;
}

/* Buttons - Touch friendly */
.btn,
button {
min-height: 44px;
padding: 12px 20px;
}

/* Sections */
.section-title {
font-size: 28px;
}

.section-subtitle {
font-size: 13px;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
width: 85%;
max-width: 320px;
padding: 70px 20px 20px;
}

.mobile-nav-item {
padding: 14px 12px;
font-size: 15px;
}
}

/* ============================================
   MOBILE (max-width: 576px)
   ============================================ */
@media (max-width: 576px) {
/* Logo */
.logo-image {
height: 50px;
max-width: 150px;
}

/* Navigation */
.navbar-top {
padding: 12px 15px;
gap: 12px;
}

.announcement-bar {
font-size: 10px;
padding: 8px 12px;
}

.logo-main {
font-size: 24px;
}

.logo-sub {
font-size: 8px;
}

.nav-icon {
font-size: 18px;
}

.hamburger-menu {
font-size: 22px;
}

/* Product Grids - 2 columns on mobile */
.products-grid,
.category-products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}

/* Product cards */
.product-card {
border-radius: 6px;
}

.product-name {
font-size: 13px;
margin-bottom: 4px;
}

.product-price {
font-size: 14px;
margin-bottom: 10px;
}

.product-metal {
font-size: 9px;
margin-bottom: 6px;
}

.add-to-cart {
font-size: 10px;
padding: 8px;
}

.product-card .wishlist-btn {
width: 30px;
height: 30px;
font-size: 14px;
top: 8px;
right: 8px;
}

/* Footer */
.footer {
padding: 40px 15px;
}

.footer-content {
grid-template-columns: 1fr !important;
gap: 25px;
text-align: center;
}

.footer-column h4 {
font-size: 13px;
margin-bottom: 15px;
}

.footer-links a {
font-size: 13px;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-logo {
font-size: 24px;
margin-bottom: 15px;
}

.footer-bottom {
padding-top: 20px;
}

.footer-copyright {
font-size: 11px;
}

.trust-badges {
flex-direction: column;
gap: 10px;
align-items: center;
}

.badge {
font-size: 10px;
}

.social-icons {
justify-content: center;
}

.social-icon {
width: 36px;
height: 36px;
font-size: 16px;
}

/* Sections */
.section-title {
font-size: 24px;
}

.section-subtitle {
font-size: 12px;
}

/* Mobile Navigation */
.mobile-nav-overlay {
width: 90%;
padding: 60px 15px 15px;
}

.mobile-nav-title {
font-size: 12px;
}

.mobile-nav-item {
padding: 12px 10px;
font-size: 14px;
}

.mobile-nav-close {
top: 15px;
right: 15px;
font-size: 24px;
}
}

/* ============================================
   SMALL MOBILE (max-width: 400px)
   ============================================ */
@media (max-width: 400px) {
/* Navigation */
.logo-main {
font-size: 22px;
}

.announcement-bar {
font-size: 9px;
}

/* Product Grids - 1 column on very small screens */
.products-grid,
.category-products-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}

.product-card {
max-width: 100%;
}

/* Footer */
.footer {
padding: 30px 12px;
}

.footer-content {
gap: 20px;
}
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
.hide-mobile {
display: none !important;
}
}

/* Hide on tablet */
@media (max-width: 992px) {
.hide-tablet {
display: none !important;
}
}

/* Show only on mobile */
@media (min-width: 769px) {
.show-mobile-only {
display: none !important;
}
}

/* Show only on tablet/mobile */
@media (min-width: 993px) {
.show-tablet-only {
display: none !important;
}
}

/* ============================================
COMMON COMPONENT FIXES
============================================ */

/* Ensure images are responsive */
img {
max-width: 100%;
height: auto;
}

/* ============================================
SINGLE PRODUCT PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.main-grid {
grid-template-columns: 1fr !important;
}

.product-gallery-container {
padding: 20px !important;
}

.product-info-container {
padding: 30px 20px !important;
}

.product-title {
font-size: 32px !important;
}

.product-price {
font-size: 24px !important;
}

.size-selector button {
width: 40px !important;
height: 40px !important;
font-size: 12px !important;
}
}

@media (max-width: 768px) {
.product-title {
font-size: 28px !important;
}

.product-price {
font-size: 20px !important;
}

.product-description {
font-size: 14px !important;
}

.quantity-selector {
flex-direction: column !important;
gap: 10px !important;
}

.quantity-selector button {
width: 100% !important;
}

.add-to-cart-btn,
.buy-now-btn {
width: 100% !important;
margin-bottom: 10px !important;
}
}

/* ============================================
CART PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.cart-container {
grid-template-columns: 1fr !important;
}

.cart-item {
grid-template-columns: 80px 1fr !important;
gap: 10px !important;
}

.cart-summary {
padding: 20px !important;
}

.checkout-btn {
width: 100% !important;
font-size: 16px !important;
padding: 15px !important;
}
}

/* ============================================
CHECKOUT PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.checkout-container {
grid-template-columns: 1fr !important;
}

.checkout-form {
padding: 20px !important;
}

.order-summary {
padding: 20px !important;
}

.form-row {
grid-template-columns: 1fr !important;
}
}

/* ============================================
SHOP/FILTER PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.shop-container {
grid-template-columns: 1fr !important;
}

.filter-sidebar {
display: none !important;
}

.filter-mobile-toggle {
display: block !important;
}
}

@media (max-width: 768px) {
.products-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

.product-item {
font-size: 14px !important;
}

.filter-bar {
flex-direction: column !important;
gap: 10px !important;
}
}

@media (max-width: 576px) {
.products-wrapper {
grid-template-columns: 1fr !important;
}

.product-item img {
aspect-ratio: 1 !important;
}
}

/* ============================================
HERO SECTION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.hero {
height: 500px !important;
min-height: 500px !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
}

.hero-slide {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
flex-direction: row !important;
}

.hero-content {
padding: 30px 20px !important;
max-width: 50% !important;
}

.hero-image-container {
padding: 30px !important;
max-width: 50% !important;
}

.hero-title {
font-size: 36px !important;
}

.hero-frame {
width: 200px !important;
height: 200px !important;
}

.hero-jewelry {
max-width: 250px !important;
max-height: 250px !important;
}
}

@media (max-width: 768px) {
.hero {
height: 600px !important;
min-height: 600px !important;
padding: 0 !important;
}

.hero-slide {
flex-direction: column !important;
justify-content: center !important;
}

.hero-content {
padding: 15px !important;
text-align: center !important;
max-width: 100% !important;
}

.hero-image-container {
padding: 15px !important;
text-align: center !important;
max-width: 100% !important;
}

.hero-image-container img {
    max-height: 220px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.hero-title {
font-size: 28px !important;
}

.hero-subtitle {
font-size: 14px !important;
}

.hero-buttons {
flex-direction: column !important;
gap: 10px !important;
}

.hero-buttons .btn {
width: 100% !important;
}

.hero-frame {
width: 150px !important;
height: 150px !important;
}

.hero-jewelry {
max-width: 200px !important;
max-height: 200px !important;
}
}

@media (max-width: 576px) {
.hero {
height: 700px !important;
min-height: 700px !important;
padding: 0 !important;
}

.hero-image-container img {
    max-height: 200px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.hero-title {
font-size: 24px !important;
}

.hero-subtitle {
font-size: 13px !important;
}

.hero-frame {
width: 100px !important;
height: 100px !important;
}

.hero-jewelry {
max-width: 120px !important;
max-height: 120px !important;
}
}

/* ============================================
COLLECTIONS GRID - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.collections-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}

.collection-card {
padding: 20px !important;
}

.collection-emoji {
width: 100px !important;
height: 100px !important;
}

.collection-name {
font-size: 18px !important;
}
}

@media (max-width: 576px) {
.collections-grid {
grid-template-columns: 1fr !important;
}

.collection-emoji {
width: 80px !important;
height: 80px !important;
}

.collection-name {
font-size: 16px !important;
}
}

/* ============================================
CATEGORIES GRID - MOBILE OPTIMIZATION
============================================ */
 @media (max-width: 768px) {
 .categories-grid {
 flex-wrap: nowrap !important;
 overflow-x: auto !important;
 gap: 20px !important;
 justify-content: flex-start !important;
 }

 .category-icon {
 width: 100px !important;
 height: 100px !important;
 font-size: 32px !important;
 }

 .category-name {
 font-size: 12px !important;
 }
 }

 @media (max-width: 576px) {
 .categories-grid {
 flex-wrap: nowrap !important;
 overflow-x: auto !important;
 gap: 15px !important;
 }

 .category-icon {
 width: 80px !important;
 height: 80px !important;
 font-size: 28px !important;
 }

 .category-name {
 font-size: 11px !important;
 }
 }

/* ============================================
FEATURES SECTION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.features-grid {
grid-template-columns: repeat(2, 1fr) !important;
}

.feature-card {
padding: 30px 20px !important;
}

.feature-card i {
font-size: 32px !important;
}

.feature-card h4 {
font-size: 16px !important;
}

.feature-card p {
font-size: 13px !important;
}
}

@media (max-width: 576px) {
.features-grid {
grid-template-columns: 1fr !important;
}

.feature-card {
padding: 20px 15px !important;
}
}

/* ============================================
INSTAGRAM SECTION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.instagram-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
}

@media (max-width: 768px) {
.instagram-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}

@media (max-width: 576px) {
.instagram-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ============================================
NEWSLETTER SECTION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.newsletter {
padding: 60px 20px !important;
}

.newsletter-title {
font-size: 32px !important;
}

.newsletter-form {
flex-direction: column !important;
align-items: center !important;
}

.newsletter-input {
width: 100% !important;
max-width: 350px !important;
}

.newsletter-form .btn {
width: 100% !important;
max-width: 350px !important;
}
}

@media (max-width: 576px) {
.newsletter-title {
font-size: 28px !important;
}

.newsletter-content p {
font-size: 14px !important;
}
}

/* ============================================
CONTACT PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
.contact-info-grid {
grid-template-columns: 1fr !important;
}

.contact-form-container {
grid-template-columns: 1fr !important;
}
}

@media (max-width: 768px) {
.contact-hero {
padding: 60px 20px !important;
}

.contact-hero-title {
font-size: 36px !important;
}

.contact-hero-subtitle {
font-size: 16px !important;
}

.contact-card {
padding: 30px 20px !important;
}

.form-row {
grid-template-columns: 1fr !important;
}

.contact-form {
padding: 30px 20px !important;
}
}

/* ============================================
FOOTER - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: repeat(2, 1fr) !important;
gap: 30px !important;
}

.footer-column {
text-align: center !important;
}

.footer-logo {
display: flex !important;
justify-content: center !important;
}

.social-icons {
justify-content: center !important;
}
}

@media (max-width: 576px) {
.footer-content {
grid-template-columns: 1fr !important;
}

.footer {
padding: 40px 15px !important;
}

.footer-column h4 {
font-size: 14px !important;
}

.footer-links a {
font-size: 13px !important;
}

.trust-badges {
flex-direction: column !important;
align-items: center !important;
}
}

/* ============================================
HOMEPAGE SPECIFIC - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 992px) {
/* Hero Section */
.hero {
    height: 650px !important;
    min-height: 650px !important;
    padding: 40px 20px !important;
}

.hero-slide {
flex-direction: column !important;
}

.hero-content {
max-width: 100% !important;
padding: 30px 20px !important;
}

.hero-image-container {
max-width: 100% !important;
padding: 20px !important;
}

.hero-image-container img {
    max-height: 260px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.hero-title {
font-size: 42px !important;
}

.hero-subtitle {
font-size: 18px !important;
}

.hero-buttons {
flex-direction: row !important;
justify-content: center !important;
gap: 15px !important;
}

.hero-buttons .btn {
width: auto !important;
display: inline-block !important;
}

/* Collections */
.collections-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}

.collection-card {
padding: 20px !important;
}

/* Products Grid */
.products-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}

/* Features */
.features-grid {
grid-template-columns: repeat(2, 1fr) !important;
}

/* Instagram */
.instagram-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}

@media (max-width: 768px) {
/* Hero */
.hero {
    height: 700px !important;
    min-height: 700px !important;
    padding: 30px 15px !important;
}

.hero-title {
font-size: 36px !important;
}

.hero-subtitle {
font-size: 16px !important;
}

.hero-frame {
width: 250px !important;
height: 250px !important;
}

.hero-jewelry {
max-width: 300px !important;
max-height: 300px !important;
}

/* Collections - Single column */
.collections-grid {
grid-template-columns: 1fr !important;
}

/* Products - 2 columns */
.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

.product-card {
padding: 15px !important;
}

/* Features - Stack */
.features-grid {
grid-template-columns: 1fr !important;
}

.feature-card {
padding: 25px 20px !important;
}

/* Instagram - 2 columns */
.instagram-grid {
grid-template-columns: repeat(2, 1fr) !important;
}

/* Newsletter */
.newsletter {
padding: 50px 20px !important;
}

.newsletter-title {
font-size: 32px !important;
}

.newsletter-form {
flex-direction: column !important;
}

.newsletter-input {
width: 100% !important;
max-width: 400px !important;
}

.newsletter-form .btn,
.newsletter-button {
    width: 100% !important;
    max-width: 400px !important;
}
}

@media (max-width: 576px) {
/* Hero - Extra small */
.hero {
    height: 750px !important;
    min-height: 750px !important;
    padding: 20px 15px !important;
}

.hero-title {
font-size: 32px !important;
}

.hero-subtitle {
font-size: 15px !important;
}

.hero-frame {
width: 200px !important;
height: 200px !important;
}

.hero-jewelry {
max-width: 250px !important;
max-height: 250px !important;
}

/* Products - Single column on very small screens */
.products-grid {
grid-template-columns: 1fr !important;
}

/* Features */
.feature-card {
padding: 20px 15px !important;
}

.feature-card i {
font-size: 28px !important;
}

.feature-card h4 {
font-size: 16px !important;
}

.feature-card p {
font-size: 13px !important;
}

/* Instagram */
.instagram-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 5px !important;
}

/* Newsletter */
.newsletter {
padding: 40px 15px !important;
}

.newsletter-title {
font-size: 28px !important;
}

.newsletter-content p {
font-size: 14px !important;
}
}

/* ============================================
NAVIGATION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.navbar-top {
padding: 15px 20px !important;
}

.search-bar {
display: none !important;
}

.nav-links {
display: none !important;
}

.hamburger-menu {
display: block !important;
}

.nav-icons {
gap: 15px !important;
}

.nav-icon {
font-size: 20px !important;
}
}

@media (max-width: 576px) {
.navbar-top {
padding: 12px 15px !important;
}

.logo-image {
height: 50px !important;
}

.announcement-bar {
font-size: 10px !important;
padding: 8px 12px !important;
}
}

/* ============================================
TAB NAVIGATION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.tabs {
flex-wrap: wrap !important;
gap: 10px !important;
}

.tab {
padding: 10px 15px !important;
font-size: 12px !important;
}
}

/* ============================================
PRODUCT BADGES - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.product-badge {
font-size: 10px !important;
padding: 4px 8px !important;
}
}

@media (max-width: 576px) {
.product-badge {
font-size: 9px !important;
padding: 3px 6px !important;
}
}

/* ============================================
BREADCRUMB - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.breadcrumb {
padding: 10px 20px !important;
font-size: 12px !important;
background: #fdf5ec !important;
border-bottom: 1px solid #e8d5c0 !important;
}
.breadcrumb a {
color: rgba(114, 17, 33, 0.7) !important;
text-decoration: none !important;
}
.breadcrumb span {
color: #721121 !important;
}
}

@media (max-width: 576px) {
.breadcrumb {
padding: 8px 15px !important;
font-size: 11px !important;
background: #fdf5ec !important;
border-bottom: 1px solid #e8d5c0 !important;
}
.breadcrumb a {
color: rgba(114, 17, 33, 0.7) !important;
text-decoration: none !important;
}
.breadcrumb span {
color: #721121 !important;
}
}

/* ============================================
MODAL/OVERLAY - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.modal,
.overlay,
.popup {
width: 95% !important;
max-height: 90vh !important;
margin: 5vh auto !important;
}

.modal-content {
padding: 20px !important;
}
}

/* ============================================
ANIMATIONS - REDUCE ON MOBILE
============================================ */
@media (max-width: 768px) {
* {
transition: none !important;
}

*:hover {
transform: none !important;
}
}

/* Fix overflow issues */
body {
overflow-x: hidden;
}

/* Container widths */
.container,
.page-container,
.content-wrapper {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}

@media (max-width: 768px) {
.container,
.page-container,
.content-wrapper {
padding: 0 15px;
}
}

/* Form inputs - touch friendly on mobile */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
font-size: 16px;
padding: 12px 15px;
min-height: 44px;
}

button,
.btn,
.btn-primary,
.btn-secondary {
min-height: 44px;
padding: 12px 20px;
font-size: 14px;
}
}

/* Modal/Overlay fixes */
@media (max-width: 768px) {
.modal,
.overlay,
.popup {
width: 95%;
max-height: 90vh;
overflow-y: auto;
margin: 5vh auto;
}
}

/* ============================================
CONTENT PAGES - Care Guide, Size Guide, etc.
============================================ */
@media (max-width: 992px) {
.content-section {
padding: 60px 30px !important;
}

.content-block h2 {
font-size: 36px !important;
}

.content-block p {
font-size: 16px !important;
}
}

@media (max-width: 768px) {
  .content-section {
  padding: 30px 15px !important;
  }

  .content-block {
  padding: 0 !important;
  }

   /* Size Guide Table Responsive - Vertical Stacked Cards */
  .table-responsive {
    overflow-x: visible !important;
    margin: 20px 0 !important;
    padding: 0 !important;
  }
  .table-responsive .size-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 14px !important;
  }
  .table-responsive .size-table thead {
    display: none;
  }
  .table-responsive .size-table tr {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8d5c0;
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 15px;
  }
  .table-responsive .size-table td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    text-align: left !important;
    font-size: 14px;
  }
  .table-responsive .size-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #721121;
    margin-right: 12px;
    font-size: 13px;
  }

.content-block h2 {
font-size: 32px !important;
margin-bottom: 20px !important;
}

.content-block p {
font-size: 15px !important;
line-height: 1.6 !important;
}

/* Care Guide specific */
.care-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}

.care-card {
padding: 20px !important;
}

.care-card i {
font-size: 32px !important;
margin-bottom: 15px !important;
}

.care-card h3 {
font-size: 18px !important;
margin-bottom: 10px !important;
}

.care-card p,
.care-card li {
font-size: 14px !important;
line-height: 1.7 !important;
}

/* Info cards */
.info-cards {
grid-template-columns: 1fr !important;
gap: 15px !important;
}

.info-card {
padding: 20px !important;
}

.highlight-box {
padding: 15px !important;
font-size: 14px !important;
}
}

@media (max-width: 576px) {
.content-section {
padding: 40px 15px !important;
}

.content-block h2 {
font-size: 28px !important;
}

.content-block p {
font-size: 14px !important;
}

.care-card {
padding: 15px !important;
}

.care-card i {
font-size: 28px !important;
}

.care-card h3 {
font-size: 16px !important;
}

.care-card p,
.care-card li {
font-size: 13px !important;
}

.highlight-box {
padding: 12px !important;
font-size: 13px !important;
}
}

/* ============================================
FAQ SECTION - Mobile Optimization
============================================ */
@media (max-width: 768px) {
.faq-section-title h2 {
font-size: 32px !important;
}

.faq-section-title p {
font-size: 15px !important;
}

.faq-question {
padding: 15px !important;
}

.faq-question h3 {
font-size: 16px !important;
}

.faq-answer {
padding: 0 15px 15px !important;
}

.faq-answer p {
font-size: 14px !important;
line-height: 1.6 !important;
}
}

@media (max-width: 576px) {
.faq-section-title h2 {
font-size: 28px !important;
}

.faq-question {
padding: 12px !important;
}

.faq-question h3 {
font-size: 15px !important;
}

.faq-answer p {
font-size: 13px !important;
}
}

/* ============================================
TIMELINE SECTION - Mobile Optimization
============================================ */
@media (max-width: 768px) {
.timeline-section {
padding: 50px 20px !important;
}

.timeline-header h2 {
font-size: 32px !important;
}

.timeline::before {
left: 20px !important;
}

.timeline-item {
padding-left: 50px !important;
margin-left: 0 !important;
}

.timeline-year {
width: 80px !important;
font-size: 14px !important;
}

.timeline-content h3 {
font-size: 18px !important;
}

.timeline-content p {
font-size: 14px !important;
}
}

@media (max-width: 576px) {
.timeline-year {
width: 70px !important;
font-size: 12px !important;
}

.timeline-item {
padding-left: 40px !important;
}

.timeline-content h3 {
font-size: 16px !important;
}

.timeline-content p {
font-size: 13px !important;
}
}

/* ============================================
CONTACT PAGE - Mobile Optimization
============================================ */
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}

.contact-item {
padding: 20px !important;
}

.contact-item i {
font-size: 28px !important;
}

.contact-item h3 {
font-size: 18px !important;
}

.contact-item p {
font-size: 14px !important;
}

.contact-form-wrapper {
padding: 20px !important;
}

.contact-form-wrapper h3 {
font-size: 20px !important;
}
}

@media (max-width: 576px) {
.contact-item {
padding: 15px !important;
}

.contact-item i {
font-size: 24px !important;
}

.contact-item h3 {
font-size: 16px !important;
}

.contact-item p {
font-size: 13px !important;
}

.contact-form-wrapper h3 {
font-size: 18px !important;
}
}

/* ============================================
JOBS GRID - Mobile Optimization
============================================ */
@media (max-width: 768px) {
.jobs-list {
grid-template-columns: 1fr !important;
gap: 20px !important;
}

.job-card {
padding: 20px !important;
}

.job-card h3 {
font-size: 18px !important;
}

.job-card p {
font-size: 14px !important;
}

.benefit-card {
padding: 15px !important;
}

.benefit-card i {
font-size: 28px !important;
}

.benefit-card h3 {
font-size: 16px !important;
}

.benefit-card p {
font-size: 13px !important;
}
}

@media (max-width: 576px) {
.job-card {
padding: 15px !important;
}

.job-card h3 {
font-size: 16px !important;
}

.job-card p {
font-size: 13px !important;
}

.benefit-card {
padding: 12px !important;
}

.benefit-card i {
font-size: 24px !important;
}

.benefit-card h3 {
font-size: 15px !important;
}

.benefit-card p {
font-size: 12px !important;
}
}

/* ============================================
PAGE TEMPLATES - Mobile Optimization
============================================ */

/* Bestsellers Page */
@media (max-width: 992px) {
section[style*="padding: 80px 40px"] {
padding: 60px 30px !important;
}
}

@media (max-width: 768px) {
section[style*="padding: 80px 40px"],
section[style*="padding: 60px 40px"] {
padding: 50px 20px !important;
}

h1[style*="font-size: 56px"] {
font-size: 42px !important;
}

p[style*="font-size: 18px"] {
font-size: 16px !important;
}
}

@media (max-width: 576px) {
section[style*="padding: 80px 40px"],
section[style*="padding: 60px 40px"] {
padding: 40px 15px !important;
}

h1[style*="font-size: 56px"] {
font-size: 36px !important;
}

h1[style*="font-size: 48px"] {
font-size: 32px !important;
}

p[style*="font-size: 18px"] {
font-size: 15px !important;
}

p[style*="font-size: 16px"] {
font-size: 14px !important;
}
}

/* Contact Page */
@media (max-width: 768px) {
.contact-hero[style*="padding: 100px 40px"] {
padding: 60px 20px !important;
}

.contact-hero-title[style*="font-size: 56px"] {
font-size: 42px !important;
}

.contact-hero-subtitle[style*="font-size: 20px"] {
font-size: 16px !important;
}
}

@media (max-width: 576px) {
.contact-hero[style*="padding: 100px 40px"] {
padding: 50px 15px !important;
}

.contact-hero-title[style*="font-size: 56px"] {
font-size: 36px !important;
}
}

/* Wishlist Page */
@media (max-width: 768px) {
.wishlist-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

.wishlist-item {
padding: 15px !important;
}

.wishlist-item img {
width: 80px !important;
height: 80px !important;
}

.wishlist-item h3 {
font-size: 14px !important;
}

.wishlist-item p {
font-size: 12px !important;
}
}

@media (max-width: 576px) {
.wishlist-grid {
grid-template-columns: 1fr !important;
}

.wishlist-item {
padding: 12px !important;
}

.wishlist-item img {
width: 60px !important;
height: 60px !important;
}

.wishlist-item h3 {
font-size: 13px !important;
}
}

/* Product Cards in Pages */
@media (max-width: 768px) {
.product-card[style*="padding: 30px"] {
padding: 20px !important;
}

.product-card h3[style*="font-size: 24px"] {
font-size: 18px !important;
}

.product-card p[style*="font-size: 16px"] {
font-size: 14px !important;
}

.btn[style*="padding: 15px 30px"] {
padding: 12px 20px !important;
font-size: 14px !important;
}
}

@media (max-width: 576px) {
.product-card[style*="padding: 30px"] {
padding: 15px !important;
}

.product-card h3 {
font-size: 16px !important;
}

.product-card p {
font-size: 13px !important;
}

.btn[style*="padding: 15px 30px"] {
padding: 10px 15px !important;
font-size: 13px !important;
}
}

/* General inline style fixes for mobile */
@media (max-width: 768px) {
/* Fix large padding values */
[style*="padding: 100px"] {
padding: 60px 20px !important;
}

[style*="padding: 80px 40px"],
[style*="padding: 80px"] {
padding: 50px 20px !important;
}

[style*="padding: 60px 40px"],
[style*="padding: 60px"] {
padding: 40px 20px !important;
}

/* Fix large font sizes */
[style*="font-size: 56px"] {
font-size: 42px !important;
}

[style*="font-size: 48px"] {
font-size: 36px !important;
}

[style*="font-size: 42px"] {
font-size: 32px !important;
}

[style*="font-size: 36px"] {
font-size: 28px !important;
}

[style*="font-size: 32px"] {
font-size: 26px !important;
}

[style*="font-size: 28px"] {
font-size: 24px !important;
}

[style*="font-size: 24px"] {
font-size: 20px !important;
}

[style*="font-size: 20px"] {
font-size: 18px !important;
}

[style*="font-size: 18px"] {
font-size: 16px !important;
}

/* Fix max-width containers */
div[style*="max-width: 1400px"],
div[style*="max-width: 1200px"],
div[style*="max-width: 1000px"] {
max-width: 100% !important;
padding: 0 20px !important;
}

/* Fix grid layouts */
div[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

div[style*="grid-template-columns: repeat(3"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}

/* Fix buttons */
a[style*="padding: 15px 30px"],
button[style*="padding: 15px 30px"],
.btn[style*="padding: 15px 30px"] {
padding: 12px 24px !important;
font-size: 14px !important;
}

/* Fix images */
img[style*="width:100%"],
img[style*="width: 100%"] {
max-width: 100% !important;
height: auto !important;
}

/* Fix sections with background */
section[style*="background"] {
background-size: cover !important;
background-position: center !important;
}
}

@media (max-width: 576px) {
/* Further reduce for small mobile */
[style*="padding: 100px"],
[style*="padding: 80px 40px"],
[style*="padding: 80px"] {
padding: 40px 15px !important;
}

[style*="padding: 60px 40px"],
[style*="padding: 60px"],
[style*="padding: 50px"] {
padding: 30px 15px !important;
}

[style*="padding: 40px"] {
padding: 20px 15px !important;
}

[style*="font-size: 56px"],
[style*="font-size: 48px"] {
font-size: 32px !important;
}

[style*="font-size: 42px"] {
font-size: 28px !important;
}

[style*="font-size: 36px"] {
font-size: 26px !important;
}

[style*="font-size: 32px"] {
font-size: 24px !important;
}

[style*="font-size: 28px"] {
font-size: 22px !important;
}

[style*="font-size: 24px"] {
font-size: 20px !important;
}

[style*="font-size: 20px"] {
font-size: 18px !important;
}

[style*="font-size: 18px"] {
font-size: 16px !important;
}

[style*="font-size: 16px"] {
font-size: 14px !important;
}

/* Single column grids */
div[style*="grid-template-columns: repeat(4"],
div[style*="grid-template-columns: repeat(3"],
div[style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
gap: 15px !important;
}

/* Fix buttons */
a[style*="padding: 15px 30px"],
button[style*="padding: 15px 30px"],
.btn[style*="padding: 15px 30px"] {
padding: 10px 20px !important;
font-size: 13px !important;
display: inline-block !important;
width: 100% !important;
text-align: center !important;
}

/* Fix product cards */
div[style*="background: #fff"][style*="border-radius"] {
margin-bottom: 15px !important;
}

/* Fix badges */
span[style*="position: absolute"] {
padding: 4px 10px !important;
font-size: 10px !important;
}

/* Fix aspect ratios */
div[style*="aspect-ratio: 1"] {
aspect-ratio: 1/1 !important;
}

/* Fix max-width paragraphs */
p[style*="max-width: 600px"],
p[style*="max-width: 800px"] {
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

/* Extra small mobile */
@media (max-width: 400px) {
[style*="padding: 80px"],
[style*="padding: 60px"] {
padding: 30px 12px !important;
}

[style*="font-size: 56px"],
[style*="font-size: 48px"],
[style*="font-size: 42px"] {
font-size: 28px !important;
}

[style*="font-size: 36px"],
[style*="font-size: 32px"] {
font-size: 24px !important;
}

/* Single column for everything */
div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}



/* ============================================
GLOBAL MOBILE FIX - Prevent horizontal scroll
============================================ */
@media (max-width: 768px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}

* {
max-width: 100% !important;
box-sizing: border-box !important;
}

img {
max-width: 100% !important;
height: auto !important;
}

.container, .wrapper {
width: 100% !important;
max-width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
}


/* ============================================
SINGLE PRODUCT PAGE - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
/* Main container */
main[style*="padding: 40px"] {
padding: 20px 15px !important;
}

/* Grid layout - Stack vertically */
div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
display: block !important;
grid-template-columns: 1fr !important;
gap: 30px !important;
}

/* Product gallery container */
div:has(#mainImage),
div:has(.product-gallery),
div[style*="display: grid"] > div:first-child {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}

/* Main image */
#mainImage,
img[id="mainImage"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
}

/* Thumbnails container */
div[style*="display: flex"][style*="gap: 15px"] {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin-top: 15px !important;
}

/* Individual thumbnail */
div[style*="width: 80px"][style*="height: 80px"] {
width: 70px !important;
height: 70px !important;
}

/* Product info - Move below gallery */
.aj-product-info,
div.aj-product-info {
margin-top: 30px !important;
padding: 20px !important;
background: #fff !important;
border-radius: 12px !important;
}

/* Product title */
h1[style*="font-size: 42px"] {
font-size: 28px !important;
margin-bottom: 15px !important;
}

/* Price */
span[style*="font-size: 32px"] {
font-size: 24px !important;
}

/* Add to cart button */
button[type="submit"],
button[name="add-to-cart"] {
width: 100% !important;
padding: 15px !important;
font-size: 16px !important;
}
}

/* ============================================
SMALL MOBILE - 576px
============================================ */
@media (max-width: 576px) {
/* Further reduce sizes */
h1[style*="font-size: 42px"] {
font-size: 24px !important;
}

span[style*="font-size: 32px"] {
font-size: 20px !important;
}

/* Thumbnails smaller */
div[style*="width: 80px"][style*="height: 80px"] {
width: 60px !important;
height: 60px !important;
}

/* Main container */
main[style*="padding: 40px"] {
padding: 15px 10px !important;
}
}



/* ============================================
PRICE BREAKDOWN SECTION - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
/* Price breakdown container */
div[style*="background: linear-gradient(135deg, #E8D5C0"] {
padding: 20px 15px !important;
}

/* Title */
h3[style*="font-size: 20px"] {
font-size: 18px !important;
}

/* Breakdown rows */
div[style*="padding: 10px"][style*="background: #fff"] {
padding: 8px !important;
margin-bottom: 8px !important;
}

/* Text sizes */
span[style*="font-size: 14px"] {
font-size: 13px !important;
}

/* Price sizes */
span[style*="font-size: 16px"],
span[style*="font-size: 18px"] {
font-size: 15px !important;
}

/* Final price */
span[style*="font-size: 24px"] {
font-size: 20px !important;
}
}

@media (max-width: 576px) {
/* Further reduce on small mobile */
div[style*="background: linear-gradient(135deg, #E8D5C0"] {
padding: 15px 10px !important;
}

h3[style*="font-size: 20px"] {
font-size: 16px !important;
}

/* Stack icons and text */
i.fa-solid {
font-size: 14px !important;
}
}



/* ============================================
SINGLE PRODUCT PAGE - FOOTER FIX
============================================ */
.woocommerce-page footer .footer {
    background: #fdf5ec !important;
    padding: 60px 40px 30px !important;
}

.woocommerce-page footer .footer-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Mobile - Single column */
@media (max-width: 768px) {
    .woocommerce-page footer .footer {
        padding: 40px 20px 20px !important;
    }
    
    .woocommerce-page footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .woocommerce-page footer .footer-column {
        text-align: center !important;
    }
    
    .woocommerce-page footer .footer-logo {
        display: flex !important;
        justify-content: center !important;
    }
    
    .woocommerce-page footer .social-icons {
        justify-content: center !important;
        margin-top: 20px !important;
    }
    
    .woocommerce-page footer .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding-top: 20px !important;
    }
    
    .woocommerce-page footer .trust-badges {
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .woocommerce-page footer .badge {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
}

/* PC - 4 columns */
@media (min-width: 992px) {
    .woocommerce-page footer .footer-content {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 60px !important;
    }
    
    .woocommerce-page footer .footer {
        padding: 80px 60px 40px !important;
    }
    
    .woocommerce-page footer .footer-column {
        text-align: left !important;
    }
    
    .woocommerce-page footer .social-icons {
        justify-content: flex-start !important;
    }
}


/* ============================================
SINGLE PRODUCT PAGE - FOOTER IDENTICAL TO HOMEPAGE
Force apply homepage footer styles to all WooCommerce pages
============================================ */
.woocommerce-page footer.footer,
.single-product footer.footer {
    background: #fdf5ec !important;
    padding: 80px 60px 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.woocommerce-page footer .footer-content,
.single-product footer .footer-content {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 60px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.woocommerce-page footer .footer-column,
.single-product footer .footer-column {
    text-align: left !important;
    padding: 0 !important;
}

.woocommerce-page footer .footer-logo img,
.single-product footer .footer-logo img {
    height: 70px !important;
    width: auto !important;
}

.woocommerce-page footer h4,
.single-product footer h4 {
    font-size: 18px !important;
    color: #721121 !important;
    margin-bottom: 25px !important;
    font-weight: 600 !important;
}

.woocommerce-page footer .footer-links li,
.single-product footer .footer-links li {
    margin-bottom: 15px !important;
}

.woocommerce-page footer .footer-links a,
.single-product footer .footer-links a {
    color: rgba(114, 17, 33, 0.8) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.woocommerce-page footer .footer-links a:hover,
.single-product footer .footer-links a:hover {
    color: #721121 !important;
}

.woocommerce-page footer .social-icons,
.single-product footer .social-icons {
    margin-top: 25px !important;
}

.woocommerce-page footer .social-icons a,
.single-product footer .social-icons a {
    width: 45px !important;
    height: 45px !important;
    font-size: 20px !important;
}

.woocommerce-page footer .footer-bottom,
.single-product footer .footer-bottom {
    border-top: 2px solid #e8d5c0 !important;
    padding-top: 30px !important;
    margin-top: 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.woocommerce-page footer .trust-badges,
.single-product footer .trust-badges {
    display: flex !important;
    gap: 25px !important;
}

.woocommerce-page footer .badge,
.single-product footer .badge {
    font-size: 13px !important;
    color: rgba(114, 17, 33, 0.7) !important;
}

/* Mobile - Single column for all pages */
@media (max-width: 768px) {
    .woocommerce-page footer.footer,
    .single-product footer.footer {
        padding: 40px 20px 20px !important;
    }
    
    .woocommerce-page footer .footer-content,
    .single-product footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .woocommerce-page footer .footer-column,
    .single-product footer .footer-column {
        text-align: center !important;
    }
    
    .woocommerce-page footer .footer-logo,
    .single-product footer .footer-logo {
        display: flex !important;
        justify-content: center !important;
    }
    
    .woocommerce-page footer .social-icons,
    .single-product footer .social-icons {
        justify-content: center !important;
    }
    
    .woocommerce-page footer .footer-bottom,
    .single-product footer .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .woocommerce-page footer .trust-badges,
    .single-product footer .trust-badges {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

/* ============================================
COMPREHENSIVE MOBILE RESPONSIVE - ALL PAGES
Alveera Jewellery Theme
============================================ */

/* ============================================
BASE MOBILE SETUP
============================================ */
@media (max-width: 768px) {
    /* Container fixes */
    .container,
    .content-area,
    #primary,
    #secondary,
    main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Typography scale down */
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    p { font-size: 14px !important; line-height: 1.6 !important; }
}

/* ============================================
HEADER MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
    header .header,
    .site-header {
        padding: 10px 15px !important;
    }
    
    .logo img {
        height: 50px !important;
        width: auto !important;
    }
    
    .main-navigation ul {
        display: none !important; /* Mobile menu will handle */
    }
    
    .header-search {
        display: none !important; /* Hide on mobile */
    }
}

/* ============================================
HOMEPAGE - HERO SECTION MOBILE
============================================ */
@media (max-width: 768px) {
    .hero {
        height: 600px !important;
        min-height: 600px !important;
        padding: 20px !important;
    }
    
    .hero-content {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }
    
    .hero-subtitle {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        padding: 12px !important;
    }
    
    .hero-image-container {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .hero-jewelry {
        max-width: 200px !important;
        max-height: 200px !important;
    }
}

/* ============================================
HOMEPAGE - COLLECTIONS GRID MOBILE
============================================ */
@media (max-width: 768px) {
    .collections-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .collection-card {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .collection-emoji {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 10px !important;
    }
    
    .collection-name {
        font-size: 16px !important;
        display: block !important;
        margin-top: 10px !important;
    }
}

@media (max-width: 576px) {
    .collections-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
HOMEPAGE - PRODUCTS GRID MOBILE
============================================ */
@media (max-width: 768px) {
    .products-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .product-card {
        padding: 10px !important;
    }
    
    .product-image {
        aspect-ratio: 1/1 !important;
    }
    
    .product-name {
        font-size: 14px !important;
        margin: 8px 0 !important;
    }
    
    .product-price {
        font-size: 14px !important;
    }
    
    .product-btn,
    .add-to-cart-btn {
        width: 100% !important;
        padding: 10px !important;
        font-size: 12px !important;
        margin-top: 10px !important;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
SINGLE PRODUCT PAGE MOBILE
============================================ */
 @media (max-width: 768px) {
     .single-product main {
         padding: 20px 15px !important;
     }
     
     .single-product main > div > div:first-child {
         grid-template-columns: 1fr !important;
         gap: 30px !important;
     }
     
     .single-product .product-gallery {
         margin-bottom: 20px !important;
     }
     
     .product-info {
         padding: 20px !important;
     }
     
     .product-title {
         font-size: 24px !important;
         margin-bottom: 10px !important;
     }
     
     .product-price {
         font-size: 20px !important;
         margin-bottom: 15px !important;
     }
     
     .product-description {
         font-size: 14px !important;
         line-height: 1.6 !important;
     }
     
     .quantity-selector {
         flex-direction: column !important;
         gap: 10px !important;
     }
     
     .add-to-cart-btn,
     .buy-now-btn {
         width: 100% !important;
         height: 50px !important;
         font-size: 14px !important;
         margin-bottom: 10px !important;
     }
 }

/* ============================================
SHOP/ARCHIVE PAGE MOBILE
============================================ */
@media (max-width: 768px) {
    .woocommerce-page .products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .woocommerce-page .product {
        padding: 10px !important;
    }
    
    .woocommerce-page .product img {
        aspect-ratio: 1/1 !important;
    }
    
    .woocommerce-page .product .product_title {
        font-size: 14px !important;
    }
    
    .woocommerce-page .product .price {
        font-size: 14px !important;
    }
    
    .woocommerce-page .product .button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .woocommerce-page .products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
PAGE TEMPLATES MOBILE
============================================ */
@media (max-width: 768px) {
    /* Contact Page */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .contact-form-wrapper {
        padding: 20px !important;
    }
    
    /* Bestsellers Page */
    .bestsellers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* All full-width sections */
    section[style*="padding: 80px"],
    section[style*="padding: 60px"] {
        padding: 40px 20px !important;
    }
}

@media (max-width: 576px) {
    .bestsellers-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
CART & CHECKOUT MOBILE
============================================ */
@media (max-width: 768px) {
    .woocommerce-cart .cart-collaterals,
    .woocommerce-checkout .checkout {
        display: block !important;
    }
    
    .woocommerce-cart .cart_totals,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        margin-top: 30px !important;
    }
    
    .woocommerce table.cart {
        font-size: 12px !important;
    }
    
    .woocommerce .checkout input,
    .woocommerce .checkout textarea,
    .woocommerce .checkout select {
        padding: 10px !important;
        font-size: 14px !important;
    }
}

/* ============================================
FOOTER MOBILE
============================================ */
@media (max-width: 768px) {
footer .footer-content {
grid-template-columns: 1fr !important;
gap: 30px !important;
padding: 0 20px !important;
}

footer .footer-column {
text-align: center !important;
}

footer .footer-logo {
display: flex !important;
justify-content: center !important;
}

footer .footer-logo img {
max-height: 45px !important;
width: auto !important;
}
    
    footer .social-icons {
        justify-content: center !important;
    }
    
    footer .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 20px !important;
    }
    
footer .trust-badges {
flex-direction: column !important;
align-items: center !important;
}

footer .footer-logo img {
max-height: 38px !important;
}
}

/* Very small screens - Extra small logo */
@media (max-width: 480px) {
footer .footer-logo img {
max-height: 35px !important;
}
}

/* ============================================
UTILITY CLASSES FOR MOBILE
============================================ */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
}

/* ============================================
VERY SMALL MOBILE (=400px)
============================================ */
@media (max-width: 400px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    p { font-size: 13px !important; }
    
    .btn, button {
        padding: 10px 15px !important;
        font-size: 12px !important;
    }
}

/* ============================================
GENERAL MOBILE IMPROVEMENTS
============================================ */
@media (max-width: 768px) {
    /* All grids become single column */
    .grid,
    .row,
    [class*="col-"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Buttons touch-friendly */
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }
    
    /* Form inputs */
    input,
    textarea,
    select {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Remove hover effects on mobile */
    * {
        transition: none !important;
    }
}


/* ============================================
INLINE STYLE OVERRIDES FOR MOBILE
Fix inline styles that break mobile layout
============================================ */
@media (max-width: 768px) {
    /* Override inline padding */
    [style*="padding: 80px"],
    [style*="padding: 60px"],
    [style*="padding: 40px"] {
        padding: 30px 20px !important;
    }
    
    /* Override inline font-sizes */
    [style*="font-size: 56px"] { font-size: 32px !important; }
    [style*="font-size: 48px"] { font-size: 28px !important; }
    [style*="font-size: 42px"] { font-size: 24px !important; }
    [style*="font-size: 36px"] { font-size: 22px !important; }
    [style*="font-size: 32px"] { font-size: 20px !important; }
    [style*="font-size: 28px"] { font-size: 18px !important; }
    [style*="font-size: 24px"] { font-size: 16px !important; }
    
    /* Override inline grid layouts */
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="display: grid"] {
        gap: 15px !important;
    }
    
    /* Max-width containers */
    [style*="max-width: 1400px"],
    [style*="max-width: 1200px"] {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 576px) {
    /* Further reduce padding on very small screens */
    [style*="padding: 80px"],
    [style*="padding: 60px"],
    [style*="padding: 40px"] {
        padding: 20px 15px !important;
    }
    
    /* Single column for all grids */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Further reduce font sizes */
    [style*="font-size: 56px"],
    [style*="font-size: 48px"],
    [style*="font-size: 42px"] {
        font-size: 24px !important;
    }
    
    [style*="font-size: 36px"],
    [style*="font-size: 32px"],
    [style*="font-size: 28px"] {
        font-size: 18px !important;
    }
}

/* ============================================
PAGE SPECIFIC INLINE FIXES
============================================ */
@media (max-width: 768px) {
    /* Hero section inline styles */
    .hero[style*="height: 90vh"] {
        height: 600px !important;
        min-height: 600px !important;
    }
    
    /* Sections with inline backgrounds */
    section[style*="background"] {
        background-size: cover !important;
        background-position: center !important;
    }
}


/* ============================================
ACCOUNT DROPDOWN - MOBILE OPTIMIZATION
============================================ */
@media (max-width: 768px) {
.account-dropdown-content {
right: -10px !important;
min-width: 220px !important;
}

.account-dropdown-content a {
padding: 12px !important;
font-size: 14px !important;
}
}


/* ============================================
WOOCOMMERCE MY ACCOUNT - LOGIN/REGISTER FORMS
============================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
padding: 15px !important;
margin-bottom: 20px !important;
border-radius: 8px !important;
}

.woocommerce form .form-row {
margin-bottom: 15px !important;
}

.woocommerce form .form-row label {
display: block !important;
margin-bottom: 5px !important;
font-weight: 600 !important;
color: #721121 !important;
}

.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"] {
width: 100% !important;
padding: 12px !important;
border: 1px solid #e8d5c0 !important;
border-radius: 6px !important;
font-size: 14px !important;
}

.woocommerce form .form-row input[type="text"]:focus,
.woocommerce form .form-row input[type="email"]:focus,
.woocommerce form .form-row input[type="password"]:focus {
border-color: #721121 !important;
outline: none !important;
}

.woocommerce button[type="submit"],
.woocommerce input[type="submit"] {
width: 100% !important;
padding: 15px !important;
background: #721121 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transition: all 0.3s ease !important;
}

.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover {
background: #92003b !important;
transform: translateY(-2px) !important;
}

.woocommerce .lost_password {
display: block !important;
margin-top: 15px !important;
text-align: center !important;
color: rgba(114, 17, 33, 0.7) !important;
}

.woocommerce .lost_password a {
color: #721121 !important;
text-decoration: none !important;
font-weight: 600 !important;
}

/* Register form specific */
.woocommerce-register .form-row {
margin-bottom: 20px !important;
}

.woocommerce-register p {
color: rgba(114, 17, 33, 0.7) !important;
line-height: 1.6 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"] {
font-size: 16px !important;
}
}




@media (max-width: 768px) {
  .hero-slide {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .hero-content {
    order: 2 !important;
    max-width: 100% !important;
    padding: 30px 20px !important;
    text-align: center !important;
  }
  .hero-image-container {
    order: 1 !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
  }
  .hero-buttons {
    justify-content: center !important;
    order: 3 !important;
  }
}

/* Size Guide Two-Column Layout */
.size-tables-row {
  display: flex;
  gap: 30px;
  margin: 30px 0;
}
.size-table-col {
  flex: 1;
  min-width: 0;
}
.size-table-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: #721121;
  margin-bottom: 15px;
  text-align: center;
}
.size-table-col .size-table {
  width: 100%;
  border-collapse: collapse;
}
.size-table-col .size-table th,
.size-table-col .size-table td {
  border: 1px solid #e8d5c0;
  padding: 8px;
  text-align: center;
}
.size-table-col .size-table th {
  background: #E8D5C0;
  color: #721121;
  font-weight: 600;
}

/* Mobile stacking for two-column layout */
@media (max-width: 768px) {
  .size-tables-row {
    flex-direction: column;
  }
  .size-table-col {
    margin-bottom: 30px;
  }
}

/* Card Actions Buttons (Wishlist & Quick View) Centering & Sizing Fixes */
.aj-card-actions button,
.aj-product-card .aj-card-actions button,
.aj-related-products .aj-card-actions button {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.aj-card-actions button i,
.aj-product-card .aj-card-actions button i,
.aj-related-products .aj-card-actions button i {
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
}

/* ============================================
   PAGE HERO BANNERS - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 768px) {
    .story-hero-content,
    .crafts-hero-content,
    .sus-hero-content,
    .careers-hero-content,
    .press-hero-content,
    .store-hero-content,
    .ship-hero-content,
    .care-hero-content,
    .faq-hero-content,
    .contact-hero-content {
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Force all text inside these hero banners to be white for contrast against background */
    .story-hero-content, .story-hero-content *,
    .crafts-hero-content, .crafts-hero-content *,
    .sus-hero-content, .sus-hero-content *,
    .careers-hero-content, .careers-hero-content *,
    .press-hero-content, .press-hero-content *,
    .store-hero-content, .store-hero-content *,
    .ship-hero-content, .ship-hero-content *,
    .care-hero-content, .care-hero-content *,
    .faq-hero-content, .faq-hero-content *,
    .contact-hero-content, .contact-hero-content * {
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }

    /* Adjust padding of hero banners for mobile */
    .story-hero,
    .crafts-hero,
    .sus-hero,
    .careers-hero,
    .press-hero,
    .store-hero,
    .ship-hero,
    .care-hero,
    .faq-hero,
    .contact-hero {
        padding: 80px 20px !important;
    }

    /* Scale down hero titles for mobile screens */
    .story-title,
    .crafts-title,
    .sus-title,
    .careers-title,
    .press-title,
    .store-title,
    .ship-title,
    .care-title,
    .faq-title,
    .contact-hero-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    /* Scale down lead paragraphs */
    .story-lead,
    .crafts-lead,
    .sus-lead,
    .careers-lead,
    .press-lead,
    .store-lead,
    .ship-lead,
    .care-lead,
    .faq-lead,
    .contact-hero-subtitle {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}

/* Fix for features grid icons size on mobile and desktop */
.features-grid i,
.features-grid svg {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

@media (max-width: 768px) {
    .features-grid i,
    .features-grid svg {
        font-size: 44px !important;
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 15px !important;
    }
}