/* SabJewels storefront overrides.
   Loaded via themeConfig.headTags.links in config/default.json + config/production.json.
   Cloudflare caches this file (browser TTL 4 h): bump the ?v= in BOTH config files after
   editing it, then `docker restart evershop-sabjewels`. */

/* ---------- Header ----------
   The theme header is a 3-column grid: nav | logo | search-cart-account icons.
   The centre logo is intentionally removed (Aug 2026). Do NOT delete themeConfig.logo from
   the config to achieve that: without a logo.src EverShop renders its own default SVG logo.
   Hiding the cell here lets the menu take all the free width, so long items such as
   "Necklace Set" / "About us" no longer break onto two lines at desktop widths or browser
   zoom levels, and the menu no longer overlaps the icons at tablet widths. */
.header.grid {
  grid-template-columns: minmax(0, 1fr) auto;   /* nav = free width, icons = as wide as needed */
}
.header .logo {
  display: none;
}
@media (min-width: 768px) {           /* desktop menu (below this the hamburger dropdown is used) */
  .header nav {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .header nav ul {
    flex-wrap: wrap;                                   /* last resort: wrap whole items, never words */
    gap: 0.25rem clamp(0.75rem, 2vw, 2.5rem);          /* fluid spacing instead of the fixed 2.5rem */
  }
  .header nav ul > li {
    margin-left: 0 !important;                          /* cancel Tailwind md:space-x-10 */
    margin-right: 0 !important;
  }
  .header nav ul > li > a {
    white-space: nowrap;
  }
}

/* ---------- Homepage hero banner ----------
   Admin > Widgets > full-width Text Block (sort order 5) holding a 1920x720 image. It rendered at
   100% of the viewport, so on desktop it filled almost the whole screen. On large screens cap the
   widget body to the theme content width (.page-width = 1200px minus 2 x 55px padding) and center
   it, so the banner lines up with the collection columns and product grid below it. Phones and
   tablets (< 1200px) keep the edge-to-edge banner. */
@media (min-width: 1200px) {
  .text-block-widget:not(.page-width) .editor__html .prose {
    max-width: 1090px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Disabled: this old rule never applied (custom.css was not linked until Aug 2026), and the
   current logo.png is a tall 913x1444 mark that a 50% radius would clip. */
/* img[src*="logo.png"] { border-radius: 50%; } */