/* ═══════════════════════════════════════════════════════════
 LYRĪON ATELIER - MASTER DESIGN SYSTEM
 DO NOT MODIFY WITHOUT EXPLICIT PERMISSION
 ═══════════════════════════════════════════════════════════ */

:root {
 /* OFFICIAL BRAND COLORS - NEVER CHANGE */
 --gold-primary: #d4af37;
 --gold-light: #f0c659;
 --gold-dark: #b8941f;
 
 --purple-deep: #302b63;
 --purple-dark: #24243e;
 --navy-darkest: #0f0c29;
 --navy-dark: #0a0820;
 
 --white: #ffffff;
 --white-80: rgba(255, 255, 255, 0.8);
 --white-60: rgba(255, 255, 255, 0.6);
 
 /* FORBIDDEN COLORS - NEVER USE */
 --forbidden-blue: #4169E1; /* BANNED */
 --forbidden-orange: #FF8C00; /* BANNED */
}

/* ═══════════════════════════════════════════════════════════
 PRODUCT CARDS - UNIVERSAL STYLING
 EXACT SPECIFICATIONS FROM REQUIREMENTS:
 - Card: 480px height, 12px radius, 20px padding, white bg
 - Image: 320px height, fills space, no cutoff
 - Info: 140px height
 - Title: 18px gold, 2 lines max
 - Price: 24px bold gold
 - Button: 44px height, gold bg, navy text
 ═══════════════════════════════════════════════════════════ */

.product-card,
.product {
 background: #ffffff !important;
 border: none !important;
 border-radius: 12px !important;
 overflow: hidden !important;
 display: flex !important;
 flex-direction: column !important;
 height: auto !important;
 min-height: auto !important;
 max-height: none !important;
 transition: all 0.3s ease !important;
 padding: 20px !important;
 box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.product-card:hover {
 transform: translateY(-5px) !important;
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

.product-card-image {
 width: 100% !important;
 height: 320px !important;
 max-height: 320px !important;
 object-fit: contain !important;
 object-position: center !important;
 display: block !important;
 padding: 0 !important;
 background: #f8f8f8 !important;
 box-sizing: border-box !important;
 border-radius: 8px !important;
 margin-bottom: 15px !important;
}

.product-card-content {
 padding: 0 !important;
 flex: 0 0 140px !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: space-between !important;
}

.product-card-title {
 font-size: 18px !important;
 color: #d4af37 !important;
 margin-bottom: 8px !important;
 font-weight: 600 !important;
 line-height: 1.3 !important;
 max-height: 48px !important;
 overflow: hidden !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
}

.product-card-description {
 display: none !important;
}

.product-card-price {
 font-size: 24px !important;
 color: #d4af37 !important;
 font-weight: 700 !important;
 margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
 BUTTONS - EXACT SPECIFICATIONS
 Width: 100%, Height: 44px
 Background: Gold (#d4af37), Color: Navy (#0f0c29)
 Border-radius: 6px, Font-size: 16px, Font-weight: 600
 ═══════════════════════════════════════════════════════════ */

.product-card-buttons {
 display: flex !important;
 flex-direction: column !important;
 gap: 8px !important;
 margin-top: auto !important;
}

/* VIEW PRODUCT BUTTON - SOLID GOLD */
.view-product-button,
.view-button,
button[class*="view"],
a[class*="view"] {
 width: 100% !important;
 height: 44px !important;
 min-height: 44px !important;
 background: #d4af37 !important;
 border: none !important;
 color: #0f0c29 !important;
 border-radius: 6px !important;
 font-weight: 600 !important;
 font-size: 16px !important;
 cursor: pointer !important;
 transition: all 0.3s ease !important;
 text-align: center !important;
 text-decoration: none !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}

.view-product-button:hover,
.view-button:hover {
 background: #e5c245 !important;
 transform: translateY(-2px) !important;
}

/* ADD TO CART BUTTON - SOLID GOLD */
.add-to-cart-button,
.add-cart-button,
button[class*="add-to-cart"],
button[class*="add-cart"] {
 width: 100% !important;
 height: 44px !important;
 min-height: 44px !important;
 background: #d4af37 !important;
 border: none !important;
 color: #0f0c29 !important;
 border-radius: 6px !important;
 font-weight: 600 !important;
 font-size: 16px !important;
 cursor: pointer !important;
 transition: all 0.3s ease !important;
 text-align: center !important;
 text-decoration: none !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}

.add-to-cart-button:hover,
.add-cart-button:hover {
 background: #e5c245 !important;
 transform: translateY(-2px) !important;
}

/* KILL ALL BLUE AND ORANGE BUTTONS */
button[style*="4169E1"],
button[style*="blue"],
.btn-primary,
.button-primary {
 background: var(--gold-primary) !important;
 border-color: var(--gold-primary) !important;
 color: var(--navy-darkest) !important;
}

button[style*="FF8C00"],
button[style*="orange"],
.btn-warning {
 background: transparent !important;
 border: 2px solid var(--gold-primary) !important;
 color: var(--gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
 PRODUCT GRID - EXACT LAYOUT SPECIFICATIONS
 Desktop (1200px+): 3 columns, 24px gap
 Tablet (768px-1199px): 2 columns, 20px gap
 Mobile (below 768px): 1 column, 16px gap
 ═══════════════════════════════════════════════════════════ */

.product-grid,
.products-grid,
[class*="product-grid"] {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 24px !important;
 align-items: stretch !important;
 max-width: 1400px !important;
 margin: 0 auto !important;
 padding: 40px 20px !important;
}

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

@media (max-width: 767px) {
 .product-grid,
 .products-grid {
 grid-template-columns: 1fr !important;
 gap: 16px !important;
 padding: 20px 16px !important;
 }
}

/* ═══════════════════════════════════════════════════════════
 HOMEPAGE CUSTOMER FAVOURITES
 ═══════════════════════════════════════════════════════════ */

.customer-favourites,
.featured-products,
[class*="favourites"],
[class*="featured"] {
 padding: 80px 40px !important;
 background: linear-gradient(180deg, var(--navy-dark), var(--navy-darkest)) !important;
}

.customer-favourites h2,
.featured-products h2 {
 font-size: 2.5rem !important;
 color: var(--gold-primary) !important;
 text-align: center !important;
 margin-bottom: 50px !important;
 letter-spacing: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
 OVERRIDE ALL INLINE STYLES
 ═══════════════════════════════════════════════════════════ */

button[style],
a[style],
.btn[style] {
 background: #d4af37 !important;
 color: #0f0c29 !important;
 border: none !important;
}

/* ═══════════════════════════════════════════════════════════
 PRODUCT IMAGE DISPLAY FIX - SITE-WIDE
 EXACT SPECIFICATIONS:
 - Image container: 320px height fixed
 - Images: max-height 320px, fills space, no cutoff
 - Background: white, no padding
 ═══════════════════════════════════════════════════════════ */

/* Universal product image container styles */
.product-card .media,
.product-card .image,
.product-card__media,
.product-image,
.product-card-image-container,
.card__image {
 height: 320px !important;
 min-height: 320px !important;
 max-height: 320px !important;
 width: 100% !important;
 background: #f8f8f8 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 0 !important;
 box-sizing: border-box !important;
 overflow: hidden !important;
 border-radius: 8px !important;
 margin-bottom: 15px !important;
 flex-shrink: 0 !important;
 aspect-ratio: unset !important;
}

/* Universal product image styles - NO cutoff, FILL space */
.product-card img,
.product-card .media img,
.product-card .image img,
.product-card__media img,
.product-image img,
.product-card-image,
.card__image img,
#featured-grid .product-image img,
#products-grid-local .product-card img,
.shop-products-section .product-image img {
 max-height: 320px !important;
 max-width: 100% !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
 object-position: center !important;
 display: block !important;
 margin: 0 auto !important;
 padding: 0 !important;
 background: transparent !important;
}

/* Direct img child of product-card */
.product-card > img {
 max-height: 320px !important;
 max-width: 100% !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
 object-position: center !important;
 display: block !important;
 margin: 0 auto 15px auto !important;
 background: #f8f8f8 !important;
 padding: 0 !important;
 border-radius: 8px !important;
 flex-shrink: 0 !important;
}

/* Remove any gradient/animated backgrounds on product cards */
.product-card,
.product-card .media,
.product-card__media,
.product-image,
.card__image {
 animation: none !important;
 background-image: none !important;
}

/* Ensure product card has clean white background */
.product-card {
 background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
 RESPONSIVE - CARDS SIZE NATURALLY BASED ON CONTENT
 ═══════════════════════════════════════════════════════════ */

/* MOBILE (below 768px) */
@media (max-width: 767px) {
 .product-card,
 .product {
   height: auto !important;
   min-height: auto !important;
   max-height: none !important;
   max-width: 400px !important;
   margin: 0 auto !important;
 }
 
 .product-card .media,
 .product-card .image,
 .product-card__media,
 .product-image,
 .card__image {
   height: 320px !important;
   min-height: 320px !important;
   max-height: 320px !important;
   padding: 0 !important;
 }

 .product-card img,
 .product-card-image,
 .product-image img {
   max-height: 320px !important;
 }
}

/* TABLET (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
 .product-card,
 .product {
   height: auto !important;
   min-height: auto !important;
   max-height: none !important;
 }
 
 .product-card .media,
 .product-card .image,
 .product-card__media,
 .product-image,
 .card__image {
   height: 320px !important;
   min-height: 320px !important;
   max-height: 320px !important;
   padding: 0 !important;
 }

 .product-card img,
 .product-card-image,
 .product-image img {
   max-height: 320px !important;
 }
}

/* DESKTOP (1200px+) */
@media (min-width: 1200px) {
 .product-card,
 .product {
   height: auto !important;
   min-height: auto !important;
   max-height: none !important;
 }
 
 .product-card .media,
 .product-card .image,
 .product-card__media,
 .product-image,
 .card__image {
   height: 320px !important;
   min-height: 320px !important;
   max-height: 320px !important;
   padding: 0 !important;
 }

 .product-card img,
 .product-card-image,
 .product-image img {
   max-height: 320px !important;
 }
}