/* HoloPlaza TCG — spacing & layout.
   The site works on a loose 4/6/8 rhythm inside components and 24–50px slabs
   between page sections. Container is 1400px, always. */
:root{
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:14px;
  --space-8:16px;
  --space-9:20px;
  --space-10:24px;
  --space-12:30px;
  --space-14:40px;
  --space-16:50px;
  --space-20:60px;
  --space-24:100px;  /* section top padding over the wall texture */

  --container-max:1400px;
  --container-pad:24px;
  --container-pad-sm:20px;
  --content-pad-block:24px 24px 60px; /* WooCommerce content area */

  --header-bar-pad:14px 24px;
  --header-nav-min-h:52px;
  --header-logo-max-h:60px;
  --search-max-w:620px;
  --search-h:44px;
  --control-h:44px;         /* qty input, selects — also the min touch target */
  --stepper-w:40px;
  --icon-size:34px;         /* header action icons */
  --icon-size-sm:20px;      /* inline glyphs, search magnifier */
  --icon-size-xs:24px;      /* hamburger */

  --grid-gap:16px;
  --grid-gap-lg:50px;       /* WooCommerce related/upsell grid */
  --card-min:300px;         /* auto-fill listing grid */
  --card-min-sm:220px;      /* friends grid */
  --card-min-lg:280px;      /* album collections */
  --tile-min-h:480px;       /* homepage feature tile, desktop */
  --tile-min-h-sm:300px;
}