/**
 * Ren & Remy's Shop - Consolidated Styles
 * =======================================
 * All shop-specific styles in one file
 * 
 * Contents:
 * 1. CSS Variables
 * 2. Product Grid & List Layouts
 * 3. Product Cards & Rows
 * 4. Stock Badges
 * 5. Cart Controls & Steppers
 * 6. Product Detail Page
 * 7. Filters & Sidebar
 * 8. Skeletons & Loading States
 * 9. Responsive Breakpoints
 * 
 * @package RenAndRemys\Shop
 * @version 1.0.0
 */

/* ============================================================================
   1. CSS VARIABLES
   ============================================================================ */
:root {
  /* Brand Colors (matching main site palette) */
  --pink: #E899F2;
  --cyan: #9BE2F2;
  --ink: #0d0d0d;
  --ink-2: #1a1a1a;
  --white: #f2f2f2;
  --purple: #6D33A6;
  
  /* Stock Status Colors (functional indicators) */
  --stock-green: #2ecc71;
  --stock-red: #e74c3c;
  --stock-amber: #f1c40f;
  
  /* Shop-Specific Color Assignments */
  --shop-primary: var(--purple);          /* Primary actions, CTAs */
  --shop-primary-dark: #5a2a8a;          /* Darker purple for hover */
  --shop-secondary: var(--cyan);          /* Secondary highlights, info */
  --shop-accent: var(--pink);             /* Featured badges, accents */
  --shop-dark: var(--ink);                /* Text, dark elements */
  --shop-light: var(--white);             /* Backgrounds, cards */
  /* Glow color for product card effects (R, G, B) */
  --shop-glow-rgb: 232,153,242;
  
  /* Neutral Colors */
  --color-bg: var(--white);
  --color-bg-secondary: #e6e6e6;
  --color-border: #cccccc;
  --color-text: var(--ink);
  --color-text-muted: #666666;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(13,13,13,0.1);
  --shadow-md: 0 4px 6px rgba(13,13,13,0.1);
  --shadow-lg: 0 10px 25px rgba(13,13,13,0.15);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* ============================================================================
   2. PRODUCT GRID & LIST LAYOUTS
   ============================================================================ */

/* Shop Layout Container - Sidebar + Main Content */
.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* reduce gap by half to bring content closer to sidebar */
  gap: calc(var(--spacing-xl) / 3);
  align-items: start;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: calc(var(--spacing-lg) / 3);
  margin-top: var(--spacing-lg);
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Make content area leave room on the right for floating social icons */
.shop-main-content {
  padding-right: 60px;
}

/* LIST VIEW: make product cards behave as fixed-height rows */
.products-list .product-card {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: var(--spacing-md);
  align-items: center;
  height: 140px !important; /* enforce fixed row height */
  min-height: 140px;
  max-height: 140px; /* triple constraint to prevent any expansion */
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.75); /* match sidebar background */
  border: 1px solid var(--ink-2);
  border-radius: 8px;
  overflow: hidden;
}

.products-list .product-card .product-image-wrapper {
  width: 100%;
  height: 100%;
  padding-top: 0; /* remove 1:1 aspect for list rows */
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.products-list .product-card .product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Middle text area: two-line layout */
.products-list .product-card .product-main-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-right: 8px;
  max-height: 100%; /* prevent overflow beyond card height */
  overflow: hidden; /* clip any excess content */
}
.products-list .product-card .product-main-info .product-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* don't let name compress */
  color: #f2f2f2 !important;
}
.products-list .product-card .product-main-info .product-short-desc {
  margin: 0 !important;
  /* Description text: light gray and match card background */
  color: #e6e6e6 !important;
  /* Make the description background match the card background */
  background: inherit !important;
  font-size: 0.95rem;
  /* clamp to 3 lines to maintain consistent tile height */
  display: -webkit-box !important;
  line-clamp: 3 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1.1em !important;
  max-height: calc(1.1em * 3) !important; /* enforce 3-line max with !important */
  flex-shrink: 1; /* allow description to compress if needed */
  word-break: break-word; /* ensure long words break */
  padding: 0 4px 0 5px !important; /* 3px left padding to avoid text touching card edge */
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   GLOBAL PARAGRAPH OVERRIDE (style.css sets p { max-width:60%; margin:auto })
   We need product descriptions to use full available width and left alignment
   inside the shop module. This scoped override prevents the global rule from
   constraining width or centering text within product cards.
   -------------------------------------------------------------------------- */
.shop-main-content .products-grid .product-card .product-short-desc,
.shop-main-content .products-list .product-card .product-main-info .product-short-desc,
.shop-main-content .product-card .product-main-info p.product-short-desc {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important; /* remove all margins to prevent expansion */
  text-align: left !important;
  padding-left: 3px !important; /* ensure consistent left spacing inside card */
  /* Ensure description matches card background and uses light text */
  background: inherit !important;
  color: #a7a7a7 !important;
  box-sizing: border-box;
}

/* If any generic p within product-main-info inherits the global centering rule, neutralize it */
.shop-main-content .products-list .product-card .product-main-info p,
.shop-main-content .products-grid .product-card .product-info p {
  max-width: 100% !important;
  margin: 0 !important; /* zero all margins */
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   Horizontal gap adjustments (2px) for descriptions, pricing, and cart
   controls so content doesn't touch card edges. Applies to grid & list.
   -------------------------------------------------------------------------- */
.shop-main-content .products-grid .product-card .product-pricing,
.shop-main-content .products-list .product-card .product-actions-list,
.shop-main-content .products-list .product-card .product-main-info,
.shop-main-content .products-grid .product-card .product-info,
.shop-main-content .products-grid .product-card .cart-controls,
.shop-main-content .products-list .product-card .cart-controls,
.shop-main-content .products-grid .product-card .btn-add-to-cart,
.shop-main-content .products-list .product-card .btn-add-to-cart {
  padding-left: 2px;
  padding-right: 2px;
}

/* Right actions column: price + cart controls */
.products-list .product-card .product-actions-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 8px;
  /* transparent so underlying card background shows through */
  background: transparent !important;
}

/* Force all children of actions list to display inline */
.products-list .product-card .product-actions-list > * {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}

/* Make cart-controls wrapper behave inline so it doesn't force a new row */
.products-list .product-card .cart-controls {
  display: inline-flex !important;
  align-items: center;
  width: auto !important; /* override global width: 100% */
}

.product-price-large {
  font-size: 1rem; /* slightly smaller to fit side-by-side */
  font-weight: 700;
  color: var(--shop-primary);
  white-space: nowrap; /* prevent price wrapping */
}

/* Consolidated Add-to-Cart button styles (single source of truth)
   - Uses a CSS variable for width so layout contexts can set the
     desired width without redefining the full button style.
   - Place all visual styles here so only this selector controls the
     button appearance for the shop module. */
body .shop-main-content .btn-add-to-cart {
  width: var(--shop-btn-add-to-cart-width, 50%);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--shop-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

body .shop-main-content .btn-add-to-cart:hover {
  background: var(--shop-primary-dark);
}

body .shop-main-content .btn-add-to-cart:disabled {
  background: var(--color-border);
  cursor: not-allowed;
}

/* Make product-card grid view still use original background but align with sidebar */
.products-grid .product-card,
.products-list .product-card {
  /* light background with 75% opacity (requested: #f2f2f2 at 75%) */
  background: rgba(242,242,242,0.75);
  border: 1px solid var(--ink-2);
}

/* View Mode Toggle */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.view-mode-toggle {
  display: flex;
  gap: var(--spacing-xs);
  /* Inherit neutral/transparent shell so child buttons control visual state */
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Top filters row that holds category bar and inline controls */
.filters-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* tighter gap so controls fit on one row */
  justify-content: flex-start;
  margin-bottom: var(--spacing-md);
  flex-wrap: nowrap; /* avoid wrapping on desktop */
  overflow-x: auto; /* allow horizontal scroll if container is too small */
  -webkit-overflow-scrolling: touch;
}

.filters-top .category-bar {
  display: flex;
  gap: 6px; /* tighten spacing between category chips */
  flex-wrap: nowrap;
  align-items: center;
}

.filters-top .category-bar .category-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.92rem;
  border-radius: 6px;
}

.view-mode-toggle.inline-toggle {
  margin-left: 6px;
  height: 34px;
  display: inline-flex;
  align-items: center;
}

/* Inline filter wrapper for top-row controls (e.g. sort) */
.filters-top .inline-filter {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

/* Frame around the compact select to match toggle button appearance */
.filters-top .inline-filter .sort-frame {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 4px 6px;
  height: 32px;
}

.filters-top .inline-filter .filter-select.compact {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 0.9rem;
  padding: 2px 6px;
  height: 28px;
  min-width: 120px;
}

.filters-top .inline-filter .filter-select.compact:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(155,226,242,0.12);
}

@media (max-width: 800px) {
  .filters-top {
    flex-direction: column;
    align-items: stretch;
  }
  .view-mode-toggle.inline-toggle {
    margin-left: 0;
    align-self: flex-end;
  }
}

.view-mode-btn {
  padding: 6px 8px;
  border: none;
  background: rgba(255,255,255,0.04); /* darkened by default */
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 6px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  box-shadow: none;
}

/* Category buttons and view toggle share the same button contract */
.filters-top .category-btn,
.view-mode-toggle .view-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px; /* reduced horizontal padding to tighten */
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  background: rgba(255,255,255,0.04);
  color: var(--white);
  transition: box-shadow 150ms ease, transform 80ms ease, background 160ms ease;
}

.filters-top .category-btn:hover,
.view-mode-toggle .view-mode-btn:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

/* Active/selected state: inherit full gradient like .auth-btn */
.filters-top .category-btn.active,
.view-mode-toggle .view-mode-btn.active {
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

/* Make the small icon buttons slightly tighter */
.view-mode-toggle .view-mode-btn {
  padding: 0 8px;
  min-width: 32px;
  height: 32px; /* child buttons slightly smaller than outer container */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-mode-btn:hover:not(.active) {
  background: var(--color-bg-secondary);
}

/* ============================================================================
   3. PRODUCT CARDS & ROWS
   ============================================================================ */

/* Product Card (Grid View) */
.product-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

/* Hover effects for product cards intentionally disabled here.
   Visual hover state is handled by the scoped override at the end
   of this file which applies a minimal theme-pink inner glow only. */
.product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.product-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.product-card:hover .product-image {
  transform: none !important;
}

.product-link {
  text-decoration: none;
  color: inherit;
}

.featured-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  background: var(--shop-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.wishlist-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
}

.wishlist-btn:hover {
  background: white;
  transform: scale(1.1);
}

.wishlist-btn.active {
  color: #e74c3c;
}

.wishlist-btn.active svg path {
  fill: currentColor;
}

.product-info {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}

/* Ensure grid-view card content area matches requested solid background */
body .shop-main-content .product-info {
  background: #0d0d0d !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Product name inside product cards should use the light color to match descriptions */
body .shop-main-content .product-card .product-name {
  color: #f2f2f2 !important;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.product-pricing {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shop-primary);
}

.price-original {
  font-size: 1rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.price-tier {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shop-primary);
}

.tier-badge {
  background: var(--shop-secondary);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Product Row (List View) */
.product-row {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--spacing-lg);
  align-items: center;
  transition: box-shadow var(--transition-base);
}

.product-row:hover {
  box-shadow: var(--shadow-md);
}

/* =======================================================================
   Strong shop-scoped hover reset to block thin 1px strokes coming from
   global / plugin styles. This neutralizes box-shadow/outline/border only
   for product cards on the shop pages, then reapplies the intended
   subtle pink inner glow. Use high-specificity + !important to win the
   cascade from third-party CSS without editing upstream files.
   ======================================================================= */
.shop-main-content .product-card,
.shop-main-content .product-card * {
  /* remove any lingering static shadows so hover reset is consistent */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* When hovering a product card, aggressively neutralize strokes/outlines
   that are sometimes applied via box-shadow or outline from other styles. */
.shop-main-content .product-card:hover,
.shop-main-content .product-card:hover * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  outline: 0 !important;
  border: none !important;
  border-color: transparent !important;
}

/* Reapply the desired minimal theme-pink inner glow only — no outer 1px
  stroke. Keep this subtle and inset so it reads as a glow, not a border. */
.shop-main-content .product-card:hover {
  box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.18), 0 9px 27px rgba(var(--shop-glow-rgb),0.06) !important;
  -webkit-box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.18), 0 9px 27px rgba(var(--shop-glow-rgb),0.06) !important;
  -moz-box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.18), 0 9px 27px rgba(var(--shop-glow-rgb),0.06) !important;
}

/* Ensure product images do not scale on hover (neutralize any src/global rule) */
.shop-main-content .product-card:hover .product-image {
  transform: none !important;
}


.product-row .product-image-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  padding-top: 0;
  border-radius: 6px;
  overflow: hidden;
}

.product-row .product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.product-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.product-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.meta-category,
.meta-brand {
  padding: 2px 8px;
  background: var(--color-bg-secondary);
  border-radius: 4px;
}

.product-description {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-end;
}

/* ============================================================================
   4. STOCK BADGES
   ============================================================================ */

.stock-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stock-in {
  background: rgba(46, 204, 113, 0.1);
  color: var(--stock-green);
  border: 1px solid var(--stock-green);
}

.stock-low {
  background: rgba(241, 196, 15, 0.1);
  color: var(--stock-amber);
  border: 1px solid var(--stock-amber);
}

.stock-out {
  background: rgba(231, 76, 60, 0.1);
  color: var(--stock-red);
  border: 1px solid var(--stock-red);
}

/* ============================================================================
   5. CART CONTROLS & STEPPERS
   ============================================================================ */

/* Grid view: cart controls take full width */
.products-grid .cart-controls {
  width: 100%;
}

/* Grid view: cart controls take full width */
.products-grid .cart-controls {
  width: 100%;
}

/* Contextual width for grid vs list is set via a CSS variable so the
   consolidated button rule above remains the single source of truth. */
.products-grid .product-card,
.products-grid .cart-controls {
  --shop-btn-add-to-cart-width: 100%;
}

/* For list view we set the variable to auto so buttons render inline */
.products-list .product-card {
  --shop-btn-add-to-cart-width: auto;
}

.btn-out-of-stock {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-border);
  color: var(--color-text-muted);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: not-allowed;
}

/* Quantity Stepper */
.quantity-stepper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* Removed background and padding for clean minimal design */
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f2f2f2;
  color: #0d0d0d;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.qty-btn:hover {
  background: #ffffff;
  opacity: 0.95;
}

.qty-btn:active {
  transform: scale(0.95);
}

.qty-display {
  min-width: 30px;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  color: #f2f2f2;
}

/* ============================================================================
   6. PRODUCT DETAIL PAGE
   ============================================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--shop-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--shop-primary-dark);
  text-decoration: underline;
}

.breadcrumb .separator {
  color: var(--color-border);
}

.breadcrumb .current {
  color: var(--color-text);
  font-weight: 500;
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Product Gallery */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.gallery-main {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  aspect-ratio: 1 / 1;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
}

.thumb-btn {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-secondary);
  padding: 0;
  transition: border-color var(--transition-fast);
}

.thumb-btn:hover {
  border-color: var(--shop-primary);
}

.thumb-btn.active {
  border-color: var(--shop-primary);
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Information */
.product-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.product-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}

.product-brand {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0;
}

.stock-indicator {
  display: flex;
  gap: var(--spacing-sm);
}

.product-pricing-large {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.price-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.price-current {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--shop-primary);
}

.tier-discount-badge {
  background: var(--shop-secondary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-block;
}

.product-description {
  line-height: 1.6;
  color: var(--color-text);
}

.long-description {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

/* Variants */
.product-variants h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.variant-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.variant-btn:hover:not(.disabled) {
  border-color: var(--shop-primary);
  background: rgba(255, 107, 53, 0.05);
}

.variant-btn.active {
  border-color: var(--shop-primary);
  background: var(--shop-primary);
  color: white;
}

.variant-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.variant-oos {
  font-size: 0.75rem;
  color: var(--stock-red);
}

/* Quantity Selector */
.quantity-selector {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quantity-selector label {
  font-weight: 600;
  font-size: 0.875rem;
}

.quantity-input-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: fit-content;
}

.qty-input {
  width: 60px;
  text-align: center;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add-to-cart-large {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--shop-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.btn-add-to-cart-large:hover {
  background: var(--shop-primary-dark);
}

.btn-wishlist {
  padding: var(--spacing-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.btn-wishlist:hover {
  border-color: var(--shop-primary);
  color: var(--shop-primary);
}

/* Related Products */
.related-products-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

.related-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.related-product-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--transition-base);
}

.related-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.related-product-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.related-product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.related-product-card h3 {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  margin: 0;
  font-weight: 600;
}

.related-product-card .price {
  padding: 0 var(--spacing-md) var(--spacing-md);
  font-size: 1rem;
}

/* ============================================================================
   7. FILTERS & SIDEBAR
   ============================================================================ */

.shop-sidebar {
  background: rgba(13, 13, 13, 0.5);
  border: 1px solid var(--ink-2);
  /* Square left edge to sit flush with screen, rounded on right side */
  border-radius: 0 8px 8px 0;
  padding: var(--spacing-lg);
  height: fit-content;
  position: sticky;
  top: var(--spacing-lg);
}

.shop-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-group h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cyan);
}

.filter-input,
.filter-select {
  padding: var(--spacing-sm);
  border: 1px solid var(--ink-2);
  border-radius: 4px;
  font-size: 0.875rem;
  width: 100%;
  background: var(--ink-2);
  color: var(--white);
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--cyan);
}

.price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.price-inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 0;
  color: var(--white);
}

.filter-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.filter-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-2);
}

.btn-primary {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--shop-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-primary:hover {
  background: var(--shop-primary-dark);
}

.btn-outline {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-outline:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}

/* ============================================================================
   8. SKELETONS & LOADING STATES
   ============================================================================ */

.loading-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.skeleton-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.skeleton-card::before {
  content: '';
  display: block;
  padding-top: 100%;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, #e0e0e0 50%, var(--color-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================================================
   9. RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media (max-width: 1024px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: calc(var(--spacing-md) / 2);
  }
  
  .product-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .product-row .product-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .product-actions {
    align-items: stretch;
  }
  
  .product-title {
    font-size: 1.5rem;
  }
  
  .price-current {
    font-size: 2rem;
  }
  
  .shop-sidebar {
    position: static;
  }
  
  .shop-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .related-products-grid {
    grid-template-columns: 1fr;
  }
  
  .breadcrumb {
    font-size: 0.75rem;
  }
  
  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .thumb-btn {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.product-card .product-actions-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}

.product-card .product-actions-list > * {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}

.product-card .cart-controls {
  width: auto !important;
  display: inline-flex !important;
}

/* ────────────────────────────────────────────────
   Product Actions List — Stick to Card Bottom
   ────────────────────────────────────────────────*/
.product-card {
  position: relative;            /* establish containing block for absolute child */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* text & content stack above the bar */
  height: 100%;                  /* ensure equal card height grid-wide */
}

/* force spacing above actions so card content doesn't overlap */
.product-card .product-main-info {
  flex: 1 1 auto;
  padding-bottom: 42px;          /* reserve space for fixed bar height */
  box-sizing: border-box;
  /* Solid card content background per design: no opacity or effects */
  background: #000000 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* pin price + button row */
.product-card .product-actions-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  gap: 8px;
  /* transparent so underlying card background shows through */
  background: transparent !important;
  border-top: none !important; /* remove thin line between description and actions */
  box-sizing: border-box;
}

/* keep inner elements inline */
.product-card .product-actions-list > * {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}
.product-card .cart-controls {
  display: inline-flex !important;
  align-items: center;
  width: 100px !important;
}

/* --------------------------------------------------------------------------
   Inline sort dropdown — show "Sort By" label inside field
   Safe, small styles scoped to the inline sort control
   -------------------------------------------------------------------------- */
.inline-filter.sort-filter select.filter-select.compact {
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-weight: 500;
  border-radius: 6px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 4px 10px;
  min-width: 130px;
  height: 32px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.inline-filter.sort-filter select.filter-select.compact:hover {
  background: rgba(255,255,255,0.08);
}

.inline-filter.sort-filter select.filter-select.compact:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(155,226,242,0.25);
}

/* small caret icon using pseudo-element */
.inline-filter.sort-filter .sort-frame {
  position: relative;
}

.inline-filter.sort-filter .sort-frame::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  pointer-events: none;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Product card hover: disable any scale/translate/shifts and apply a
   minimal theme-pink glow instead. Scoped to shop styles so global rules
   elsewhere remain unchanged.
   -------------------------------------------------------------------------- */
.product-card,
.products-list .product-card,
.products-grid .product-card {
  /* neutralize any transform set elsewhere */
  transform: none !important;
  will-change: box-shadow, transform;
}

.product-card,
.product-card .product-image {
  /* prefer smooth shadow transitions; image transform disabled */
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.product-card:hover {
  /* do not translate or scale the card */
  transform: none !important;
  /* subtle pink glow — uses a lightweight shadow so it's minimal */
  box-shadow: 0 12px 39px rgba(var(--shop-glow-rgb),0.12), 0 0 45px rgba(var(--shop-glow-rgb),0.09) inset;
}

.product-card:hover .product-image {
  /* prevent image scaling on hover (some rules previously scaled images)
     instead add a faint image-level shadow for depth without shifting layout */
  transform: none !important;
  filter: drop-shadow(0 9px 24px rgba(var(--shop-glow-rgb),0.09));
}


/* Also ensure list-row variants don't get transformed elsewhere */
.product-row,
.product-row:hover,
.related-product-card,
.related-product-card:hover {
  transform: none !important;
}

/* Keep wishlist and small interactive buttons original behavior — they
   may still scale on hover; we only prevent product-card level shifts. */

/* =======================================================================
   FINAL AUTHORITATIVE OVERRIDE
   ---------------------------------------------------------------------
   Placed at the end of the shop stylesheet so it wins the cascade for
   shop pages. Uses high specificity (body + shop-main-content) and
   !important on the visual properties we want to control. This aims to
   block any thin 1px strokes that may be applied by other global or
   plugin CSS (including pseudo-elements) while preserving the subtle
   inset pink glow we intend.
   ======================================================================= */

body .shop-main-content .product-card,
body .shop-main-content .products-grid .product-card,
body .shop-main-content .products-list .product-card {
  transform: none !important;
  will-change: box-shadow, transform;
}

/* Subtle default inner border glow (theme-pink) for all product cards. */
body .shop-main-content .product-card {
  box-shadow: inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.068) !important;
  -webkit-box-shadow: inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.068) !important;
  -moz-box-shadow: inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.068) !important;
}

/* Neutralize shadows/outlines on card and all descendants so stray
   box-shadows or borders on child elements can't produce a thin stroke */
body .shop-main-content .product-card,
body .shop-main-content .product-card *,
body .shop-main-content .product-card::before,
body .shop-main-content .product-card::after,
body .shop-main-content .product-card *::before,
body .shop-main-content .product-card *::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  outline: 0 !important;
  border: none !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
}

/* Reapply authoritative pink inner glow on the card element only. We
   use an inset shadow so it reads as glow, not a hard border. This
   should override earlier non-!important rules and most third-party
   rules because of specificity + !important. */
body .shop-main-content .product-card:hover {
  transform: none !important;
  /* Slightly stronger inset glow on hover while remaining subtle */
  box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.15), inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.09) !important;
  -webkit-box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.15), inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.09) !important;
  -moz-box-shadow: inset 0 0 18px rgba(var(--shop-glow-rgb),0.15), inset 0 0 0 1px rgba(var(--shop-glow-rgb),0.09) !important;
}

/* Layered overlay glow that sits above all card children. Uses a high z-index
   and pointer-events:none so it doesn't block interaction. We include
   !important to override prior neutralizing rules on pseudo-elements. */
body .shop-main-content .product-card {
  position: relative !important; /* ensure pseudo-element positions correctly */
  z-index: 0 !important; /* base stacking context inside layout */
}

body .shop-main-content .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 99999 !important; /* sit above any children */
  box-shadow: inset 0 0 27px rgba(var(--shop-glow-rgb),0.21), inset 0 0 0 2px rgba(var(--shop-glow-rgb),0.12) !important;
  transition: box-shadow 220ms ease, opacity 200ms ease;
  opacity: 1;
}

body .shop-main-content .product-card:hover::after {
  box-shadow: inset 0 0 42px rgba(var(--shop-glow-rgb),0.30), inset 0 0 0 2px rgba(var(--shop-glow-rgb),0.18) !important;
}

/* Ensure images do not scale and do not reintroduce shadows on hover */
body .shop-main-content .product-card:hover .product-image,
body .shop-main-content .product-card .product-image {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   Sidebar: Clear All filters button — default dark style
   ------------------------------------------------------------------
   Make the left sidebar "Clear All" button (id="clear-filters") use
   a dark background (#262626) with light text (#f2f2f2) by default.
   On hover it reverts to the standard .btn-outline hover appearance.
*/
body .shop-sidebar .filter-actions #clear-filters {
  background: #262626 !important;
  color: #f2f2f2 !important;
  border-color: transparent !important;
}

/* Reapply the existing btn-outline hover visuals when hovering this
   specific button so the hover style remains consistent with the
   rest of the site controls. */
body .shop-sidebar .filter-actions #clear-filters:hover {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-text-muted) !important;
  color: var(--color-text) !important;
}

/* Pagination controls for product grid */
.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 8px;
}
.shop-pagination .pager-btn {
  background: transparent;
  border: 1px solid rgba(13,13,13,0.08);
  color: var(--shop-dark);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.shop-pagination .pager-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.shop-pagination .pager-indicator {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  min-width: 68px;
  text-align: center;
}

/* Small visible-count used by JS to show per-page counts next to labels */
.visible-count {
  margin-left: 6px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Product rating display - ensure rating text is always light */
.product-rating-compact .rating-text,
.product-rating .rating-text,
span.rating-text {
  color: #f2f2f2 !important;
}