/**
 * 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

/* Hero spacing: position below fixed header */
/**
#shop-hero.hero { margin-top: calc(var(--site-header-height,64px) + 12px) !important; }
 * 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
 */

/* Imports removed: core/global and loyalty CSS are now emitted from PHP head to
  ensure they resolve to the canonical main-site host (avoids fragile
  relative imports when CSS is served from shop subdomain). */

/* ============================================================================
   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(231px, 1fr)); /* +10% tile width (210px → 231px) */
  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 */
/* Further reduced to fit 4 columns instead of 3 (additional 33% reduction) */
.products-list .product-card {
  display: grid;
  grid-template-columns: clamp(60px, 70px, 80px) 1fr clamp(60px, 70px, 80px); /* 140px → 70px (50% reduction) */
  gap: var(--spacing-sm);
  align-items: center;
  height: clamp(65px, 70px, 80px) !important; /* 140px → 70px (50% reduction) */
  min-height: clamp(65px, 70px, 80px);
  max-height: clamp(65px, 70px, 80px); /* triple constraint to prevent any expansion */
  padding: var(--spacing-xs) var(--spacing-sm);
  background: #000000; /* solid fill */
  border: 1px solid var(--ink-2);
  border-radius: 6px;
  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: 3px; /* reduced from 6px */
  padding-right: 4px; /* reduced from 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: var(--fs-xs); /* reduced from var(--fs-sm) to var(--fs-sub-sm) = 0.90rem */
  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: var(--fs-sub-sm) !important; /* 0.90rem */
  /* 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: 1em !important;
  max-height: calc(1em * 2) !important; /* reduce from 3-line to 2-line max */
  flex-shrink: 1; /* allow description to compress if needed */
  word-break: break-word; /* ensure long words break */
  padding: 0 2px 0 2px !important; /* reduced padding */
  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;
  font-size: var(--fs-xs) !important; /* 0.70rem */
  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: var(--fs-ctrl); /* reduced from var(--fs-sm) to var(--fs-ctrl) = 1.00rem */
  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: clamp(3px, 4px, 6px) clamp(6px, 8px, 10px); /* further reduced */
  background: var(--shop-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: var(--fs-sub-sm); /* reduced from var(--fs-ctrl) to var(--fs-sub-sm) = 0.90rem */
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* reduced gap */
}

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: #f2f2f2; /* solid fill */
  border: 1px solid var(--ink-2);
}

/* Ensure consistent spacing between product actions and content above */
.products-grid .product-card .product-actions-list {
  margin-top: auto;
  gap: 8px;
  padding: 3px 8px 8px 8px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

.products-grid .product-card .cart-controls {
  width: 100%;
  --shop-btn-add-to-cart-width: 100%;
}


/* 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: space-between;
  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;
}

/* Sort filter positioned at right edge of products-grid */
.filters-top .inline-filter.sort-filter {
  margin-left: auto;
  margin-right: 0;
}

/* Clean select styling for compact appearance */
.filters-top .inline-filter .filter-select.compact {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: var(--ink);
  color: var(--white);
  font-size: 0.9rem;
  padding: 6px 28px 6px 12px;
  height: 32px;
  min-width: 130px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* Custom caret */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 28px;
}

.filters-top .inline-filter .filter-select.compact:hover {
  background-color: #1a1a1a;
}

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

/* Style dropdown options */
.filters-top .inline-filter .filter-select.compact option {
  background: var(--ink);
  color: var(--white);
  padding: 8px 12px;
}

@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);
}

.filters-top .category-btn.active:hover,
.view-mode-toggle .view-mode-btn.active:hover {
  color: var(--white) !important;
}

/* 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;
  /* Increased by 50px from previous baseline */
  height: clamp(286px, 336px, 385px); /* +10% size bump (260/305/350 → 286/336/385) */
}

/* 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: 94%; /* +10% image area (85% → 94%) */
  overflow: hidden;
  background: #000000;
  flex-shrink: 0;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px 5px 5px 5px; /* top right bottom left */
  object-fit: contain; /* preserve aspect while fitting inside padded box */
  transition: transform var(--transition-base);
  background: #000000; /* dark fill behind letterboxed images */
}

.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: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

/* 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;
}

/* Unified text content container for both .product-main-info and .product-info */
.product-main-info,
.product-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  justify-content: flex-start;
  background: #000000;
}

.product-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  margin: 0;
  padding: 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-short-desc {
  font-size: var(--fs-xs) !important; /* 0.70rem - override global p styles */
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.product-pricing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  background: #000000;
}

.price {
  font-size: var(--fs-sm);
  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 removed to match desired visual — previously 1px solid var(--ink-2) */
  border: none;
  /* 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);
}

/* Hide Apply Filters button since filters now update live */
#apply-filters {
  display: none;
}

.btn-primary {
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  color: var(--ink) !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  text-decoration: none !important;
}

.btn-primary:hover {
  box-shadow: 0 0 16px var(--pink);
  color: var(--white) !important;
  text-decoration: none !important;
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  color: var(--ink) !important;
}

.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;
  padding: 0 5px;
}

.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;
}

.product-card .cart-controls {
  display: inline-flex !important;
  align-items: center;
  width: 100px !important;
}

/* 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: var(--ink);
  color: var(--white);
  font-weight: 500;
  border-radius: 6px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 28px 6px 12px;
  min-width: 130px;
  height: 32px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.inline-filter.sort-filter select.filter-select.compact:hover {
  background: #1a1a1a;
}

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

/* Style dropdown options to match Sort By appearance */
.inline-filter.sort-filter select.filter-select.compact option {
  background: var(--ink);
  color: var(--white);
  padding: 8px 12px;
}

/* --------------------------------------------------------------------------
   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; */ /* REMOVED: This was stripping borders from buttons/inputs */
  /* border-color: transparent !important; */ /* REMOVED */
  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 */
  isolation: isolate; /* Create new stacking context */
}

body .shop-main-content .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1 !important; /* sit above children but below modals */
  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 - HIDDEN (infinite scroll enabled) */
.shop-pagination {
  display: none !important; /* Disabled in favor of infinite scroll */
}

/* Infinite scroll loading indicator */
#scroll-loading {
  display: none;
  text-align: center;
  padding: 30px 20px;
  color: var(--shop-dark);
  font-size: 14px;
  opacity: 0.7;
}

#scroll-loading.active {
  display: block;
}

#scroll-sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
}

/* Legacy pagination styles kept for reference but not rendered */
.shop-pagination-legacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 8px;
}

/* Hide shop controls until the rectangle/section has faded in. See global
   helper rules in `style.css` — toggle `.rect-visible` or
   `.section-3-visible` on a parent to reveal these. */
.shop-pagination,
.view-mode-toggle,
.filters-top .category-btn {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
}
.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;
  font-size: var(--fs-xs) !important;
  display: none !important;
}

/* ======================================================================
   CART PAGE — DASHBOARD-STYLE FLEX LAYOUT (Dark Theme)
   Merged from shop-cart.css
   ---------------------------------------------------------------------- */

/* Smart Cart Controls (scoped) - Clean Minimal Design */
.shop-main-content .cart-controls,
.products-list .product-card .cart-controls,
.products-grid .product-card .cart-controls,
.hero-info .cart-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shop-main-content .quantity-stepper,
.hero-info .quantity-stepper {
  display: none;
  align-items: center;
  gap: 6px;
}

.shop-main-content .qty-btn,
.shop-main-content .cart-minus,
.shop-main-content .cart-plus,
.shop-main-content .cart-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #f2f2f2;
  color: #0d0d0d;
  border: none;
  cursor: pointer;
  transition: background 80ms ease, opacity 80ms ease;
}

.shop-main-content .qty-btn:hover,
.shop-main-content .cart-minus:hover,
.shop-main-content .cart-plus:hover,
.shop-main-content .cart-trash:hover {
  background: #ffffff;
  opacity: 0.95;
}

/* Button active flash feedback */
.shop-main-content .qty-btn.btn-active-flash,
.shop-main-content .btn-add-to-cart.btn-active-flash {
  background: #ffffff;
  transition: background 50ms ease;
}

.shop-main-content .qty-display,
.shop-main-content .cart-qty,
.hero-info .qty-display {
  min-width: 28px;
  text-align: center;
  color: #f2f2f2;
  font-weight: 500;
  font-size: 15px;
  will-change: transform;
}

/* Quantity pulse animation */
.shop-main-content .qty-display.qty-pulse,
.hero-info .qty-display.qty-pulse {
  animation: qtyPulse 200ms ease;
}

@keyframes qtyPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Ensure no light hover bleed on dark theme */
.shop-main-content .qty-btn svg,
.shop-main-content .cart-minus svg,
.shop-main-content .cart-plus svg,
.shop-main-content .cart-trash svg,
.hero-info .qty-btn svg,
.hero-info .cart-trash svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Make add-to-cart button swap smooth */
.shop-main-content .btn-add-to-cart,
.hero-info .btn-add-to-cart {
  transition: opacity 100ms ease, transform 100ms ease;
}
.shop-main-content .btn-add-to-cart[style*="display: none"],
.hero-info .btn-add-to-cart[style*="display: none"] {
  opacity: 0;
  transform: scale(0.98);
}

/* Cart Layout */
.cart-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  color: #f2f2f2;
  padding: 0 1rem;
  position: relative; /* Create positioning context */
}

/* Left panel: main cart area */
.cart-items {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding-right: 2rem; /* Space for sticky summary */
}

.cart-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.8rem;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item-tile {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  background: rgba(26,26,26,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  align-items: center;
}

.cart-item-tile .card-media {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  display: block;
}

.cart-item-tile .card-media:hover {
  opacity: 0.8;
}

.cart-item-tile .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item-tile .image-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 10px;
}

.cart-item-tile .card-body {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.cart-item-tile .item-name {
  font-weight: 700;
  font-size: 15px;
  color: #f2f2f2;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.cart-item-tile .item-name:hover {
  color: var(--cyan);
}

.cart-item-tile .item-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-item-tile .item-unit-price {
  font-size: 14px;
  color: #aaa;
  white-space: nowrap;
  font-weight: 600;
}

.cart-item-tile .qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px 6px;
}

.cart-item-tile .qty-dec,
.cart-item-tile .qty-inc {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-tile .qty-dec:hover,
.cart-item-tile .qty-inc:hover {
  color: var(--pink);
  transform: scale(1.1);
}

.cart-item-tile .qty-display {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  color: #f2f2f2;
  font-size: 14px;
}

.cart-item-tile .item-line-total {
  font-weight: 700;
  font-size: 16px;
  color: var(--cyan);
  white-space: nowrap;
}

.cart-item-tile .card-actions {
  display: flex;
  justify-content: flex-end;
}

.cart-item-tile .remove-line {
  background: transparent;
  border: 1px solid rgba(255,69,180,0.4);
  color: var(--pink);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cart-item-tile .remove-line:hover {
  background: rgba(255,69,180,0.1);
  border-color: var(--pink);
  transform: translateY(-1px);
}

/* Empty cart message and continue shopping button - center them */
.empty-cart {
  text-align: center;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.empty-cart-msg {
  margin: 0;
  font-size: 1rem;
  color: #f2f2f2;
}

.cart-continue-wrap {
  text-align: center;
  margin: 4rem 0 0;
}

/* Right panel: sticky summary */
.cart-summary {
  flex: 1;
  min-width: 300px;
  max-width: 380px;
  background: rgba(26,26,26,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5rem;
  position: sticky;
  top: 170px; /* Increased for proper clearance below fixed header */
  align-self: flex-start; /* Prevents stretching */
  max-height: calc(100vh - 190px); /* Adjusted for new top value */
  overflow-y: auto; /* Scroll if content too long */
}

.cart-summary h2 {
  margin-top: 0;
  font-size: 1.4rem;
}

.summary-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.summary-row.muted span:last-child {
  color: #aaa;
}

.summary-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 6px 0 10px;
}

.summary-row.total span:first-child {
  font-weight: 700;
}

.summary-row.total strong {
  font-size: 1.05rem;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.summary-actions .summary-cta {
  width: 60%;
  text-align: center;
}

/* Responsive: stack like dashboard under 900px */
@media (max-width: 900px) {
  .cart-container {
    flex-direction: column;
    gap: 20px;
  }
  .cart-items {
    margin-right: 0;
    max-width: 100%;
  }
  .cart-summary {
    position: static;
    width: 100%;
    flex: 0 0 auto;
    max-height: none;
  }
}

/* Cart page specific offset so content begins visually below fixed/header overlay */
.cart-page {
  padding-top: 180px; /* increased from 130px for more breathing room */
}

/* Inline Shipping Estimator */
.shipping-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.shipping-link {
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
  white-space: nowrap;
}

.shipping-link:hover {
  color: var(--pink);
}

.shipping-input-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shipping-input-wrapper input#shipping-zip {
  width: 70px;
  padding: 4px 8px;
  background: rgba(18, 18, 18, 0.8);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #f2f2f2;
  font-size: 0.85rem;
  font-family: var(--font2);
  transition: border-color 0.2s;
}

.shipping-input-wrapper input#shipping-zip:focus {
  outline: none;
  border-color: var(--cyan);
}

.btn-check-inline {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(155,226,242,0.15);
  border: 1px solid rgba(155,226,242,0.3);
  border-radius: 4px;
  color: var(--cyan);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-check-inline:hover:not(:disabled) {
  background: rgba(155,226,242,0.25);
  border-color: var(--cyan);
}

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

#shipping-display {
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.summary-row.shipping-row {
  align-items: center;
}

@media (max-width: 900px) {
  .cart-page {
    padding-top: 20px; /* reduce offset on mobile where header height shrinks */
  }
}

/* ============================================================================
   MERGED STYLES FROM shop/assets/shop.css
   ============================================================================ */

.shop-container { background: linear-gradient(#0d0d0d, #111); }
.shop-sidebar { background: transparent; }
.shop-main { color: #fff; }

.product-card { transition: transform 300ms ease, box-shadow 300ms ease; }

.badge { background: #9BE2F2; color: #031216; padding: 2px 8px; border-radius: 999px; font-weight:600; }

.empty-panel { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }

/* Responsive product grid */
#products.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  #products.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #products.grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .shop-sidebar { display: none; }
}

/* List view adjustments */
.list-view .product-card { display: flex; gap: 1rem; align-items: center; }
.list-view .product-card img { width: 160px; height: auto; }

/* ============================================================================
   MARKETING BANNERS (shop-banners-carousel)
   ============================================================================ */

/* Banners Carousel */
.shop-banners-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.shop-banner {
  position: relative;
  min-height: 250px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  color: #f2f2f2;
}

.banner-content h2 {
  font-size: 2rem;
  margin: 0 0 1rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.banner-content p {
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
  opacity: 0.95;
  text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.banner-content .btn-primary {
  display: inline-block;
  width: auto;
  padding: 0.75rem 2rem;
  text-decoration: none;
}

@media (max-width: 768px) {
  .shop-banners-carousel {
    grid-template-columns: 1fr;
  }
}

/* Confirm dialog background */
.confirm-box {
  background: #262626;
}

/* Promo-like notification (used for wishlist login prompt) */
.promo-like-notification{
  position:absolute; /* positioned via JS to avoid layout shift */
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:60vw;
  max-width:1100px;
  min-width:260px;
  background: var(--cyan);
  color: var(--ink);
  z-index:1200;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-size: var(--fs-sm, .95rem);
  box-sizing:border-box;
  border-radius:6px;
  padding:6px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity:0;
  transition: opacity 260ms ease, transform 260ms ease;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}
.promo-like-notification.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.promo-like-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}