/* MeatDrop editable style file: products */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .meatdrop-marketplace {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-stone-50 text-stone-900;
  }

  .md-cat-results-head {
    @apply mb-6 rounded-3xl bg-white border border-stone-200 shadow-sm p-6;
  }

  .md-cat-results-head > a {
    @apply inline-flex mb-4 text-sm font-semibold text-orange-700 hover:text-orange-900;
  }

  .md-cat-results-head span {
    @apply text-xs uppercase tracking-wide font-bold text-stone-500;
  }

  .md-cat-results-head h2 {
    @apply mt-2 text-3xl sm:text-4xl font-black tracking-tight text-stone-950;
  }

  .md-cat-results-head p {
    @apply mt-2 max-w-3xl text-base text-stone-600;
  }

  .md-cat-results-head > strong,
  .md-market-count {
    @apply mt-4 inline-flex items-center rounded-full bg-orange-100 px-4 py-2 text-sm font-bold text-orange-900;
  }

  .md-catalog-pref {
    @apply mt-6 grid gap-4 lg:grid-cols-[1fr_2fr_auto] items-stretch;
  }

  .md-catalog-pref-copy {
    @apply rounded-2xl bg-stone-100 p-4;
  }

  .md-catalog-pref-copy span {
    @apply text-xs uppercase tracking-wide font-bold text-stone-500;
  }

  .md-catalog-pref-copy h3 {
    @apply mt-1 text-xl font-black text-stone-950;
  }

  .md-catalog-pref-copy p {
    @apply mt-1 text-sm text-stone-600;
  }

  .md-catalog-pref-tabs {
    @apply grid gap-3 sm:grid-cols-3;
  }

  .md-catalog-pref-tabs a {
    @apply rounded-2xl border border-stone-200 bg-white p-4 shadow-sm hover:border-orange-300 hover:bg-orange-50 transition;
  }

  .md-catalog-pref-tabs a.is-active {
    @apply border-orange-500 bg-orange-100 ring-2 ring-orange-200;
  }

  .md-catalog-pref-tabs small {
    @apply block text-xs font-bold uppercase tracking-wide text-stone-500;
  }

  .md-catalog-pref-tabs strong {
    @apply mt-1 block text-2xl font-black text-stone-950;
  }

  .md-catalog-pref-tabs em {
    @apply mt-1 block not-italic text-sm text-stone-600;
  }

  .md-catalog-postcode-form {
    @apply rounded-2xl bg-stone-950 p-4 text-white;
  }

  .md-catalog-postcode-form label {
    @apply block;
  }

  .md-catalog-postcode-form span {
    @apply block text-xs font-bold uppercase tracking-wide text-stone-300;
  }

  .md-catalog-postcode-form input {
    @apply mt-2 w-full rounded-xl border border-stone-700 bg-white px-4 py-3 text-stone-950 outline-none focus:ring-2 focus:ring-orange-400;
  }

  .md-catalog-postcode-form button {
    @apply mt-3 w-full rounded-xl bg-orange-600 px-4 py-3 font-black text-white hover:bg-orange-700 transition;
  }

  .md-cat-section-tabs,
  .md-bulk-submenu-v82 {
    @apply mb-5 flex gap-2 overflow-x-auto pb-2;
  }

  .md-cat-section-tabs a,
  .md-bulk-submenu-v82 a {
    @apply whitespace-nowrap rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-bold text-stone-700 hover:border-orange-300 hover:bg-orange-50 transition;
  }

  .md-cat-section-tabs a.is-active,
  .md-bulk-submenu-v82 a.is-active {
    @apply border-orange-600 bg-orange-600 text-white;
  }

  .md-cat-section-tabs small {
    @apply ml-1 rounded-full bg-stone-100 px-2 py-0.5 text-xs text-stone-600;
  }

  .md-cat-section-tabs a.is-active small {
    @apply bg-white/20 text-white;
  }

  .meatdrop-product-grid {
    @apply grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  .meatdrop-product-card {
    @apply group overflow-hidden rounded-3xl border border-stone-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-xl;
  }

  .md-market-media {
    @apply relative aspect-square overflow-hidden bg-stone-100;
  }

  .meatdrop-product-image {
    @apply h-full w-full object-cover transition duration-500 group-hover:scale-105;
  }

  .md-market-fallback {
    @apply flex h-full w-full items-center justify-center bg-orange-100 text-4xl font-black text-orange-800;
  }

  .meatdrop-sale-badge {
    @apply absolute left-3 top-3 rounded-full bg-red-600 px-3 py-1 text-xs font-black text-white shadow;
  }

  .md-card-vendor-logo {
    @apply absolute bottom-3 right-3 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2 border-white bg-white shadow;
  }

  .md-card-vendor-logo img {
    @apply h-full w-full object-contain;
  }

  .md-market-card-body {
    @apply p-5;
  }

  .md-kind-row {
    @apply mb-3 flex flex-wrap gap-2;
  }

  .meatdrop-kind,
  .meatdrop-protein {
    @apply rounded-full bg-stone-100 px-3 py-1 text-xs font-bold text-stone-700;
  }

  .meatdrop-product-card h3 {
    @apply text-lg font-black leading-tight text-stone-950;
  }

  .meatdrop-product-card h3 a {
    @apply hover:text-orange-700;
  }

  .meatdrop-product-vendor {
    @apply mt-2 text-sm font-semibold text-stone-500;
  }

  .md-market-price {
    @apply mt-4 flex items-baseline gap-2;
  }

  .md-market-price strong {
    @apply text-2xl font-black text-stone-950;
  }

  .md-market-price del {
    @apply text-sm font-semibold text-stone-400;
  }

  .md-saving {
    @apply mt-2 rounded-xl bg-red-50 px-3 py-2 text-sm font-bold text-red-700;
  }

  .md-product-card-meta {
    @apply mt-4 flex flex-wrap gap-2;
  }

  .md-product-card-meta span {
    @apply rounded-full bg-stone-100 px-3 py-1 text-xs font-bold text-stone-600;
  }

  .md-cut-line {
    @apply mt-3 line-clamp-2 text-sm text-stone-500;
  }

  .md-card-actions {
    @apply mt-5 grid grid-cols-2 gap-3;
  }

  .meatdrop-button {
    @apply inline-flex items-center justify-center rounded-xl bg-stone-950 px-4 py-3 text-sm font-black text-white hover:bg-orange-700 transition;
  }

  .meatdrop-button.secondary {
    @apply bg-stone-100 text-stone-900 hover:bg-stone-200;
  }

  .md-empty-market {
    @apply rounded-2xl border border-dashed border-stone-300 bg-white p-6 text-center font-semibold text-stone-500;
  }
}