/*
 * BLOOM STOREFRONT — compact mobile rhythm
 * Purpose: remove dead/wasted space on phones while preserving readable
 * hierarchy, iPhone safe areas and existing interactive hit targets.
 * Loaded after the generated Tailwind stylesheet so these mobile overrides
 * deliberately win without rewriting business logic/components.
 */

@media (max-width: 767px) {
  /* Less empty gutter, more product/content width. */
  .bloom-site .shell {
    padding-inline: 0.875rem !important;
  }

  /* Tiny uppercase labels were consuming too much width. */
  .bloom-site .eyebrow {
    font-size: 0.625rem !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
  }

  /* Horizontal product/category rails. */
  .bloom-site .rail {
    gap: 0.625rem !important;
    scroll-padding-inline: 0.875rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* ---------------------------------------------------------------
     Vertical section rhythm — compress the oversized utility values.
     Main itself keeps its pb-24 for the fixed mobile bottom navigation.
     --------------------------------------------------------------- */
  .bloom-storefront :where([class~="py-24"], [class~="py-20"], [class~="py-16"]) {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  .bloom-storefront :where([class~="py-14"], [class~="py-12"], [class~="py-10"]) {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .bloom-storefront [class~="py-8"] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }
  .bloom-storefront [class~="py-7"] {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  .bloom-storefront [class~="py-6"] {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  .bloom-storefront [class~="py-5"] {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  .bloom-storefront :where([class~="pt-24"], [class~="pt-20"], [class~="pt-16"]) {
    padding-top: 1.25rem !important;
  }
  .bloom-storefront :where([class~="pt-14"], [class~="pt-12"], [class~="pt-10"]) {
    padding-top: 1rem !important;
  }
  .bloom-storefront [class~="pt-8"] {
    padding-top: 0.875rem !important;
  }
  .bloom-storefront [class~="pt-7"] {
    padding-top: 0.75rem !important;
  }
  .bloom-storefront [class~="pt-6"] {
    padding-top: 0.625rem !important;
  }
  .bloom-storefront [class~="pt-5"] {
    padding-top: 0.5rem !important;
  }

  .bloom-storefront :where([class~="pb-32"], [class~="pb-28"]) {
    padding-bottom: 3.25rem !important;
  }
  .bloom-storefront [class~="pb-24"] {
    padding-bottom: 2.75rem !important;
  }
  .bloom-storefront :where([class~="pb-20"], [class~="pb-16"]) {
    padding-bottom: 2rem !important;
  }
  .bloom-storefront :where([class~="pb-14"], [class~="pb-12"], [class~="pb-10"]) {
    padding-bottom: 1.25rem !important;
  }
  .bloom-storefront [class~="pb-8"] {
    padding-bottom: 1rem !important;
  }
  .bloom-storefront [class~="pb-7"] {
    padding-bottom: 0.875rem !important;
  }
  .bloom-storefront [class~="pb-6"] {
    padding-bottom: 0.75rem !important;
  }
  .bloom-storefront [class~="pb-5"] {
    padding-bottom: 0.625rem !important;
  }

  /* Heading/copy/CTA stacks. */
  .bloom-storefront [class~="mt-12"] { margin-top: 1.25rem !important; }
  .bloom-storefront [class~="mt-10"] { margin-top: 1rem !important; }
  .bloom-storefront [class~="mt-8"] { margin-top: 0.875rem !important; }
  .bloom-storefront [class~="mt-7"] { margin-top: 0.75rem !important; }
  .bloom-storefront [class~="mt-6"] { margin-top: 0.75rem !important; }
  .bloom-storefront [class~="mt-5"] { margin-top: 0.625rem !important; }
  .bloom-storefront [class~="mt-4"] { margin-top: 0.5rem !important; }
  .bloom-storefront [class~="mt-3"] { margin-top: 0.375rem !important; }

  .bloom-storefront [class~="mb-12"] { margin-bottom: 1.25rem !important; }
  .bloom-storefront [class~="mb-10"] { margin-bottom: 1rem !important; }
  .bloom-storefront [class~="mb-8"] { margin-bottom: 0.875rem !important; }
  .bloom-storefront [class~="mb-7"] { margin-bottom: 0.75rem !important; }
  .bloom-storefront [class~="mb-6"] { margin-bottom: 0.75rem !important; }
  .bloom-storefront [class~="mb-5"] { margin-bottom: 0.625rem !important; }
  .bloom-storefront [class~="mb-4"] { margin-bottom: 0.5rem !important; }
  .bloom-storefront [class~="mb-3"] { margin-bottom: 0.375rem !important; }

  /* Grid/flex gaps. */
  .bloom-storefront [class~="gap-12"] { gap: 1.25rem !important; }
  .bloom-storefront [class~="gap-10"] { gap: 1rem !important; }
  .bloom-storefront [class~="gap-8"] { gap: 0.875rem !important; }
  .bloom-storefront [class~="gap-7"] { gap: 0.75rem !important; }
  .bloom-storefront [class~="gap-6"] { gap: 0.75rem !important; }
  .bloom-storefront [class~="gap-5"] { gap: 0.625rem !important; }
  .bloom-storefront [class~="gap-4"] { gap: 0.5rem !important; }
  .bloom-storefront [class~="gap-3"] { gap: 0.5rem !important; }

  .bloom-storefront [class~="gap-y-12"] { row-gap: 1.25rem !important; }
  .bloom-storefront [class~="gap-y-10"] { row-gap: 1rem !important; }
  .bloom-storefront [class~="gap-y-8"] { row-gap: 0.875rem !important; }
  .bloom-storefront [class~="gap-y-7"] { row-gap: 0.75rem !important; }
  .bloom-storefront [class~="gap-y-6"] { row-gap: 0.75rem !important; }
  .bloom-storefront [class~="gap-y-5"] { row-gap: 0.625rem !important; }

  /* Card/surface padding: keep content breathable but stop oversized boxes. */
  .bloom-storefront [class~="p-12"] { padding: 1.25rem !important; }
  .bloom-storefront [class~="p-10"] { padding: 1.125rem !important; }
  .bloom-storefront [class~="p-8"] { padding: 1rem !important; }
  .bloom-storefront [class~="p-7"] { padding: 0.875rem !important; }
  .bloom-storefront [class~="p-6"] { padding: 0.875rem !important; }
  .bloom-storefront [class~="p-5"] { padding: 0.75rem !important; }
  .bloom-storefront [class~="p-4"] { padding: 0.625rem !important; }

  /* Tailwind space-y utilities are margins, not gap. */
  .bloom-storefront [class~="space-y-12"] > :not(:last-child) { margin-block-end: 1.25rem !important; }
  .bloom-storefront [class~="space-y-10"] > :not(:last-child) { margin-block-end: 1rem !important; }
  .bloom-storefront [class~="space-y-8"] > :not(:last-child) { margin-block-end: 0.875rem !important; }
  .bloom-storefront [class~="space-y-7"] > :not(:last-child) { margin-block-end: 0.75rem !important; }
  .bloom-storefront [class~="space-y-6"] > :not(:last-child) { margin-block-end: 0.75rem !important; }
  .bloom-storefront [class~="space-y-5"] > :not(:last-child) { margin-block-end: 0.625rem !important; }
  .bloom-storefront [class~="space-y-4"] > :not(:last-child) { margin-block-end: 0.5rem !important; }

  /* Product cards: image stays dominant; details sit closer to it. */
  .bloom-storefront article[class*="ProductCard"],
  .bloom-storefront [data-product-card] {
    row-gap: 0.375rem !important;
  }

  /* Known large campaign/hero blocks from the current storefront. */
  .bloom-storefront [class~="min-h-[650px]"] { min-height: 37rem !important; }
  .bloom-storefront [class~="min-h-[620px]"] { min-height: 35rem !important; }
  .bloom-storefront [class~="min-h-[595px]"] { min-height: 32.5rem !important; }
  .bloom-storefront [class~="min-h-[565px]"] { min-height: 30.5rem !important; }
  .bloom-storefront [class~="min-h-[500px]"] { min-height: 25rem !important; }
  .bloom-storefront [class~="min-h-[410px]"] { min-height: 22rem !important; }
  .bloom-storefront [class~="min-h-[390px]"] { min-height: 20.5rem !important; }
  .bloom-storefront [class~="min-h-[365px]"] { min-height: 19.5rem !important; }
  .bloom-storefront [class~="min-h-[340px]"] { min-height: 18rem !important; }
  .bloom-storefront [class~="min-h-[300px]"] { min-height: 14.75rem !important; }
  .bloom-storefront [class~="min-h-[185px]"] { min-height: 10rem !important; }

  /* Product gallery thumbnails / utility cards: smaller visual footprint,
     without altering actual button tap targets. */
  .bloom-storefront button[class~="size-20"] {
    width: 4rem !important;
    height: 4rem !important;
  }
  .bloom-storefront a[class~="h-24"],
  .bloom-storefront div[class~="h-24"] {
    height: 5rem !important;
  }

  /* Keep numbers/prices visually tight. */
  .bloom-storefront :where([class*="tabular-nums"], [class*="font-mono"]) {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em !important;
    word-spacing: normal !important;
  }

  /* Prevent exaggerated tracking on tiny CTA/meta labels from wasting width. */
  .bloom-storefront :where(
    [class*="tracking-[0.22em]"],
    [class*="tracking-[0.2em]"],
    [class*="tracking-[0.18em]"],
    [class*="tracking-[0.16em]"],
    [class*="tracking-[0.14em]"]
  ) {
    letter-spacing: 0.1em !important;
  }

  /* Header chrome — less screen consumed before shopping content begins.
     Only height utilities are compressed; existing icon buttons retain their
     own size-11/min-height touch targets. */
  .bloom-site > header [class~="h-9"] { height: 1.75rem !important; }
  .bloom-site > header [class~="h-16"] { height: 3.5rem !important; }
  .bloom-site > header [class~="py-4"] {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }
  .bloom-site > header [class~="gap-4"] { gap: 0.5rem !important; }
  .bloom-site > header [class~="gap-3"] { gap: 0.375rem !important; }

  /* Footer used to consume several phone screens. Keep all information,
     compact the rhythm, and preserve room above the fixed bottom nav. */
  .bloom-site > footer {
    margin-top: 2.5rem !important;
  }
  .bloom-site > footer [class~="py-16"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .bloom-site > footer [class~="py-12"] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .bloom-site > footer [class~="py-10"] {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  .bloom-site > footer [class~="py-8"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .bloom-site > footer [class~="gap-12"] { gap: 1.75rem !important; }
  .bloom-site > footer [class~="gap-8"] { gap: 1rem !important; }
  .bloom-site > footer [class~="gap-6"] { gap: 0.75rem !important; }
  .bloom-site > footer [class~="mt-8"] { margin-top: 1rem !important; }
  .bloom-site > footer [class~="mt-6"] { margin-top: 0.75rem !important; }
  .bloom-site > footer [class~="mt-4"] { margin-top: 0.5rem !important; }
  .bloom-site > footer [class~="space-y-2.5"] > :not(:last-child) {
    margin-block-end: 0.375rem !important;
  }
  .bloom-site > footer [class~="pb-32"] {
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Reviews / testimonial cards: preserve copy, remove decorative air. */
  .bloom-storefront article [class~="pt-5"] { padding-top: 0.625rem !important; }

  /* Inputs stay comfortably tappable. We compact margins around them, not
     their usable height. */
  .bloom-storefront :where(input, select, textarea) {
    scroll-margin-top: 5rem;
  }
  .bloom-storefront :where(button, [role="button"])[class*="min-h-12"],
  .bloom-storefront a[class*="min-h-12"] {
    min-height: 2.75rem !important;
  }

  /* Sticky search/filter chrome follows the now-shorter header. */
  .bloom-storefront [class*="top-[100px]"] { top: 5.25rem !important; }
  .bloom-storefront [class*="top-[116px]"] { top: 5.75rem !important; }
}

/* Tablet: still premium, just less exaggerated than desktop spacing. */
@media (min-width: 768px) and (max-width: 1023px) {
  .bloom-site .shell {
    padding-inline: 1.5rem !important;
  }
  .bloom-site .rail {
    gap: 0.75rem !important;
    scroll-padding-inline: 1.5rem !important;
  }
  .bloom-storefront :where([class~="py-24"], [class~="py-20"], [class~="py-16"]) {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .bloom-storefront :where([class~="py-12"], [class~="py-10"], [class~="py-8"]) {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  .bloom-storefront [class~="gap-10"] { gap: 1.75rem !important; }
  .bloom-storefront [class~="gap-8"] { gap: 1.5rem !important; }
  .bloom-storefront [class~="gap-6"] { gap: 1.25rem !important; }
}