/*
|--------------------------------------------------------------------------
| Template CSS (Shop + Theme)
|--------------------------------------------------------------------------
| Navigation tips:
| - Use Ctrl+F with section IDs: [S00], [S10], [S20], [S30], [S40]
| - Keep new rules inside the matching section for discoverability
|
| Table of contents
| [S00] Theme tokens (light/dark)
| [S10] Global overrides
| [S20] Shop components
| [S30] Checkout components
| [S40] Low-level UI primitives
|--------------------------------------------------------------------------
*/

/* [S00] Theme Tokens ---------------------------------------------------- */

/* Shadcn theme custom CSS | mainly for colors across the app */
:root {
  --primary: #9fbe43;
  --primary-foreground: #ffffff;
  --ring: color-mix(in srgb, #9fbe43 55%, #94a3b8);
  --chart-1: color-mix(in srgb, #9fbe43 35%, #ffffff);
  --chart-2: color-mix(in srgb, #9fbe43 55%, #ffffff);
  --chart-3: color-mix(in srgb, #9fbe43 70%, #cbd5e1);
  --chart-4: #9fbe43;
  --chart-5: color-mix(in srgb, #9fbe43 80%, #475569);
  --sidebar-primary: #9fbe43;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: color-mix(in srgb, #9fbe43 55%, #94a3b8);
  --radius: 0rem;
  --background: #ffffff;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --popover: #ffffff;
  --popover-foreground: #1c1917;
  --muted: #f5f5f4;
  --muted-foreground: #57534e;
  --border: #e7e5e4;
  --input: #e7e5e4;
}

.dark {
  --primary: #9fbe43;
  --primary-foreground: #ffffff;
  --ring: color-mix(in srgb, #9fbe43 55%, #64748b);
  --chart-1: color-mix(in srgb, #9fbe43 35%, #ffffff);
  --chart-2: color-mix(in srgb, #9fbe43 55%, #ffffff);
  --chart-3: color-mix(in srgb, #9fbe43 70%, #cbd5e1);
  --chart-4: #9fbe43;
  --chart-5: color-mix(in srgb, #9fbe43 80%, #475569);
  --sidebar-primary: #9fbe43;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: color-mix(in srgb, #9fbe43 55%, #64748b);
  --radius: 0rem;
  --background: #ffffff;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --popover: #ffffff;
  --popover-foreground: #1c1917;
  --muted: #f5f5f4;
  --muted-foreground: #57534e;
  --border: #e7e5e4;
  --input: #e7e5e4;
}

/* [S10] Global Overrides ------------------------------------------------ */

/* Global custom CSS | globals, tags, overriding tailwind classes, etc. */

body {
  background: #ffffff !important;
  color: var(--foreground);
}

/* [S20] Shop Components ------------------------------------------------- */

/* Product list — up to 4 columns (wide), fewer on small screens; tiny gap, no card borders */
.shop-product-list {
  gap: 0.375rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
  .shop-product-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .shop-product-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.shop-product-card {
  border-radius: 0;
  border: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Drop default Card ring (ring-1 ring-foreground/10) */
.shop-product-card,
.shop-product-card:is(.shop-card) {
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

.shop-product-card [data-slot="card-footer"] {
  border-top: none !important;
  background: transparent !important;
  border-radius: 0;
}

/* Info sheet: .shop-info-sheet-list, .shop-info-sheet-group, .shop-info-sheet-item */

/* Product type menu — one surface (same as item list) */
.shop-product-type-menu {
  background: var(--muted);
  border-color: var(--border);
}

.shop-product-type-menu-trigger {
  background: transparent;
  color: var(--foreground);
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  min-height: 0 !important;
  /* Slightly larger than item rows, still compact */
  padding: 0.375rem 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: normal;
}

.shop-product-type-menu-trigger [data-slot="accordion-trigger-icon"] {
  width: 0.875rem !important;
  height: 0.875rem !important;
  margin-top: 0.125rem;
}

.shop-product-type-menu-trigger:focus-visible {
  border: none !important;
}

.shop-product-type-menu-trigger a {
  color: inherit !important;
  display: block;
  padding: 0.1875rem 0.25rem;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Group category selected, no product type: primary fill, white label */
[data-slot="accordion-item"]:not(:has(.shop-product-type-menu-item[data-active="true"]))
  .shop-product-type-menu-trigger[data-active="true"] {
  background: #9fbe43;
  color: #ffffff;
}

[data-slot="accordion-item"]:not(:has(.shop-product-type-menu-item[data-active="true"]))
  .shop-product-type-menu-trigger[data-active="true"]
  a {
  color: #ffffff !important;
  font-weight: 600;
}

/* Product type selected: trigger = primary text on same surface as items */
[data-slot="accordion-item"]:has(.shop-product-type-menu-item[data-active="true"])
  .shop-product-type-menu-trigger[data-active="true"] {
  background: transparent;
  color: #9fbe43;
}

[data-slot="accordion-item"]:has(.shop-product-type-menu-item[data-active="true"])
  .shop-product-type-menu-trigger[data-active="true"]
  a {
  color: #9fbe43 !important;
  font-weight: 600;
}

.shop-product-type-menu-content {
  background: transparent;
  border: none;
}

.shop-product-type-menu-list {
  margin-top: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  background: var(--muted);
  border-left: 3px solid color-mix(in srgb, #9fbe43 55%, #cbd5e1);
}

.shop-product-type-menu-item {
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.shop-product-type-menu-item:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.shop-product-type-menu-item a {
  color: inherit;
  padding-inline: 0.5rem;
}

.shop-product-type-menu-item[data-active="true"] {
  background: #9fbe43;
  color: #ffffff;
}

.shop-product-type-menu-item[data-active="true"] a {
  color: #ffffff !important;
  font-weight: 600;
}

/* Header */
.shop-header-root {
  background: #ffffff;
  border-color: var(--border);
}

.shop-header {
  min-height: 6rem !important;
  height: auto !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.shop-header-logo img {
  height: 4.75rem !important;
  width: auto !important;
  max-width: min(20rem, 100%) !important;
  object-fit: contain;
}

/* Header: .shop-header, .shop-header-logo, .shop-header-type-group-list, .shop-header-type-group-item, .shop-header-actions */

.shop-newsletter-bar {
  background: #9fbe43 !important;
  border-bottom: 1px solid color-mix(in srgb, #ffffff 35%, #9fbe43);
  max-height: none !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.shop-newsletter-bar > div {
  align-items: center;
}

.shop-newsletter-bar-item {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Footer */
.shop-footer {
  background: #ffffff;
  border-color: var(--border);
}

/* [S30] Checkout Components -------------------------------------------- */
/* .shop-payment-way-list, .shop-payment-way-item, .shop-delivery-way-list, .shop-delivery-way-item, .shop-cart-trigger */

/* [S40] Low-level UI Primitives ---------------------------------------- */

/* shadcn: .shop-badge, .shop-button, .shop-input, .shop-dropdown-menu-trigger, .shop-dropdown-menu-radio-item, .shop-card-header, .shop-card-footer */

.shop-dropdown-menu-content {
  background: #ffffff !important;
  border-color: var(--border);
}

.shop-card {
  background: #ffffff;
  border-color: var(--border);
}