/* ============================================================
   TAILWIND UTILITY GAP-FILL
   The compiled assets/css/tailwind.css bundled with this theme was
   built against an older/different set of source files and is
   missing a number of utility classes that the current WooCommerce
   templates (product page, product cards) rely on — most critically
   grid-cols-1 / lg:grid-cols-12 / lg:col-span-6, which meant the
   single-product page never switched to its 2-column desktop layout.
   These are hand-written to match Tailwind v4's own output exactly
   (same --spacing scale, same rem-based breakpoints) so they behave
   identically to a real Tailwind build. If tailwind.css is ever
   regenerated from source, this whole file becomes redundant.

   IMPORTANT — two things keep this safely interoperable with
   tailwind.css's own generated rules:

   1) This file is enqueued BEFORE tailwind.css (dependency of
      'rlink-tailwind', not the other way around).

   2) Everything below lives inside `@layer utilities`, the exact
      same cascade layer Tailwind v4 puts its own utility classes in.
      Plain (unlayered) CSS always beats ANY layered CSS regardless of
      source order or specificity — so without this, a base rule like
      `.grid-cols-1` here would permanently win over tailwind.css's own
      `.lg\:grid-cols-4`, breaking the responsive override instead of
      losing to it the way a real Tailwind build's base-vs-breakpoint
      utilities do. The `@layer` line below pre-registers the same
      layer order tailwind.css declares (confirmed by inspecting it:
      properties, theme, base, components, utilities) so both files'
      "utilities" content merges into one layer and ordinary source
      order decides ties within it — letting our earlier-loaded base
      classes correctly lose to tailwind.css's later sm:/md:/lg:
      variants of the same property.
   ============================================================ */
@layer properties, theme, base, components, utilities;

@layer utilities {
  .mb-5 { margin-bottom: calc(var(--spacing) * 5); }
  .mb-2 { margin-bottom: calc(var(--spacing) * 2); }
  .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); }
  .mt-16 { margin-top: calc(var(--spacing) * 16); }
  .pt-8 { padding-top: calc(var(--spacing) * 8); }
  .pt-12 { padding-top: calc(var(--spacing) * 12); }
  .gap-8 { gap: calc(var(--spacing) * 8); }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .justify-start { justify-content: flex-start; }
  .items-baseline { align-items: baseline; }
  .max-w-\[200px\] { max-width: 200px; }
  .rounded-\[6px\] { border-radius: 6px; }
  .rounded-\[8px\] { border-radius: 8px; }
  .rounded-\[10px\] { border-radius: 10px; }
  .rounded-\[12px\] { border-radius: 12px; }
  .bg-white { background-color: #fff; }
  .bg-emerald-50 { background-color: #ecfdf5; }
  .border-emerald-200 { border-color: #a7f3d0; }
  .bg-rose-50 { background-color: #fff1f2; }
  .border-rose-200 { border-color: #fecdd3; }
  .bg-rose-500 { background-color: #f43f5e; }
  .text-rose-700 { color: #be123c; }
  .text-amber-500 { color: #f59e0b; }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  @media (min-width: 40rem) {
    .sm\:mb-6 { margin-bottom: calc(var(--spacing) * 6); }
    .sm\:mb-8 { margin-bottom: calc(var(--spacing) * 8); }
    .sm\:mt-10 { margin-top: calc(var(--spacing) * 10); }
    .sm\:mt-16 { margin-top: calc(var(--spacing) * 16); }
    .sm\:mt-20 { margin-top: calc(var(--spacing) * 20); }
    .sm\:pt-12 { padding-top: calc(var(--spacing) * 12); }
    .sm\:pt-16 { padding-top: calc(var(--spacing) * 16); }
    .sm\:gap-4 { gap: calc(var(--spacing) * 4); }
    .sm\:h-9 { height: calc(var(--spacing) * 9); }
    .sm\:w-9 { width: calc(var(--spacing) * 9); }
    .sm\:max-w-md { max-width: 28rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:gap-12 { gap: calc(var(--spacing) * 12); }
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  }

  /* Minimal typography for product description content (.prose max-w-none) */
  .max-w-none { max-width: none; }
  .prose { color: inherit; }
  .prose :where(p, ul, ol, table, blockquote) { margin-top: 1em; margin-bottom: 1em; }
  .prose :where(p, ul, ol, table, blockquote):first-child { margin-top: 0; }
  .prose :where(p, ul, ol, table, blockquote):last-child { margin-bottom: 0; }
  .prose :where(h1, h2, h3, h4) { margin-top: 1.5em; margin-bottom: 0.6em; font-weight: 700; color: var(--secondary, #1e293b); }
  .prose :where(ul, ol) { padding-left: 1.4em; }
  .prose li { margin-top: 0.3em; margin-bottom: 0.3em; }
  .prose a { color: var(--primary); text-decoration: underline; }
  .prose strong { font-weight: 700; }
}