/* Lighthouse Gallery: the site's own stylesheet (Lighthouse redesign R1).
   Deploy to the Host's wwwroot as /site.css and set Appearance > "Your site's stylesheet" to https://<shop host>/site.css.
   It loads after shop.css and is not in a cascade layer, so it wins over ShopCart's own rules without !important.
   Colours, fonts, corner radius and logo width are settings (docs/sites/lighthouse-gallery.md §3); this file holds only
   the structural tokens and the few touches settings can't express. */

.shop-root {
  /* Layout: 1320 px content width, 32 px gutters on wide screens. */
  --shop-container-max: 82.5rem;
  --shop-gutter: clamp(1rem, 3vw, 2rem);

  /* Greys from the design: headings a shade darker than text, #EAEAEA panels and rules. */
  --shop-color-heading: #444444;
  --shop-color-panel: #eaeaea;
  --shop-color-surface: #f2f2f2;
  --shop-color-border: #eaeaea;
  /* The design's #777 / #888 meta text is just under WCAG AA (4.5:1) at 12 px; #6f6f6f keeps the look and passes (5.0:1). */
  --shop-color-meta: #6f6f6f;

  /* Type: EB Garamond 400 headings, Jost 300 body copy, 400 for interface labels. */
  --shop-heading-weight: 400;
  --shop-display-weight: 400;
  --shop-body-weight: 300;
  --shop-label-tracking: 0.14em;
  --shop-line-height: 1.6;

  -webkit-font-smoothing: antialiased;
}

/* Interface text (navigation, buttons, labels) stays at 400 while body copy is 300. */
.shop-root :is(.shop-site-nav, .shop-btn, .shop-eyebrow, .shop-artist-card__view, .shop-archive__toggle, .shop-newsletter__button,
               .shop-trail, .shop-caption, .shop-hero__caption) {
  font-weight: 400;
}

/* Links: #555, darkening to #222 on hover. */
.shop-root a:hover {
  color: #222222;
}

/* The home page heading is the lighter grey of the amended design. */
.shop-root .shop-display-home {
  color: #7a7a7a;
}

div.shop-gallery > div > figure > picture {
-webkit-box-shadow: 13px 13px 53px -18px rgba(0,0,0,0.87);
-moz-box-shadow: 13px 13px 53px -18px rgba(0,0,0,0.87); 
box-shadow: 13px 13px 53px -18px rgba(0,0,0,0.87);       
}
