/* AccsBase product-detail density + layout A (narrow left rail) */
/* Local font definitions copied from Vault template to ensure storefront loading offline/intranet */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/rubik-latin-400-normal-j0pmKyiQ.woff2) format("woff2"), url(/assets/rubik-latin-400-normal-BV1Ho3GG.woff) format("woff");
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/rubik-latin-600-normal-7iWW07_k.woff2) format("woff2"), url(/assets/rubik-latin-600-normal-Bd1rsTk4.woff) format("woff");
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/nunito-sans-latin-400-normal-AkRraKH2.woff2) format("woff2"), url(/assets/nunito-sans-latin-400-normal-DY9yCUyQ.woff) format("woff");
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/nunito-sans-latin-600-normal-BtVRvDNj.woff2) format("woff2"), url(/assets/nunito-sans-latin-600-normal-DLks-Kj1.woff) format("woff");
}

:root {
  font-family: 'Nunito Sans', 'Rubik', system-ui, -apple-system, sans-serif !important;
}
/* Image size utilities missing from Vite CSS */
.max-h-\[160px\] {
  max-height: 160px !important;
  max-width: 160px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 768px) {
  .md\:max-h-\[200px\] {
    max-height: 200px !important;
    max-width: 200px !important;
  }
}
.max-w-\[160px\] { max-width: 160px !important; }
.md\:max-w-\[200px\] { }
@media (min-width: 768px) {
  .md\:max-w-\[200px\] { max-width: 200px !important; }
}
.max-w-\[12\.5rem\] { max-width: 12.5rem !important; }
.lg\:max-w-\[12\.5rem\] { }
@media (min-width: 1024px) {
  .lg\:max-w-\[12\.5rem\] { max-width: 12.5rem !important; }
}

/* Title */
.text-base.md\:text-lg.font-semibold.tracking-tight {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
@media (min-width: 768px) {
  .text-base.md\:text-lg.font-semibold.tracking-tight {
    font-size: 1.125rem !important;
  }
}
.text-lg.md\:text-xl.lg\:text-2xl.font-semibold.tracking-tight {
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
@media (min-width: 768px) {
  .text-lg.md\:text-xl.lg\:text-2xl.font-semibold.tracking-tight {
    font-size: 1.25rem !important;
  }
}
.lg\:text-2xl {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
}

/* Layout A: narrow left column on lg+
   Target the classic 2-col product card grid */
@media (min-width: 1024px) {
  /* When still lg:grid-cols-2 — force narrow first column */
  .product-detail-page .grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) !important;
  }
  /* When already patched to arbitrary grid class */
  .product-detail-page .grid.lg\:grid-cols-\[minmax\(0\,12\.5rem\)_1fr\] {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) !important;
  }
  /* Fallback: any 2-col card under product detail without page class on older builds */
  .bg-card.backdrop-blur-xl.border.rounded-2xl > .grid.grid-cols-1 {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) !important;
  }
}

/* Left rail: top-align, no stretch empty center */
.product-detail-page .grid > .border-r,
.bg-card.backdrop-blur-xl.border.rounded-2xl > .grid > .border-r {
  align-self: start !important;
  max-width: 12.5rem !important;
  width: 100% !important;
}
@media (max-width: 1023px) {
  .bg-card.backdrop-blur-xl.border.rounded-2xl > .grid > .border-r {
    max-width: none !important;
  }
}

/* Soften left rail fill */
.bg-secondary\/60.border-r {
  background-color: color-mix(in oklab, var(--secondary, #f1f5f9) 40%, transparent) !important;
}

/* Info column: top align not vertical center */
.product-detail-page .flex.flex-col.justify-center,
.bg-card.backdrop-blur-xl .flex.flex-col.justify-center {
  justify-content: flex-start !important;
}

/* Product List Titles (Home & Categories list views) */
.group h3.text-xs.sm\:text-sm.font-semibold,
.group h3.text-sm.sm\:text-base.font-semibold {
  font-size: 15px !important; /* 15px on mobile */
  line-height: 1.4 !important;
}
@media (min-width: 640px) {
  .group h3.text-xs.sm\:text-sm.font-semibold,
  .group h3.text-sm.sm\:text-base.font-semibold {
    font-size: 17px !important; /* 17px on desktop */
  }
}