/* Wielachowska custom styles — edited as code, deployed by Ansible.
   Overrides the Astra/Elementor design without touching the Customizer. */

/* Brice Bold Condensed — self-hosted webfont (assets/fonts/), used for the hero name.
   URLs are relative to this stylesheet. The 100–900 weight range maps any requested
   weight onto this single face, so the browser never synthesises faux-bold. */
@font-face {
  font-family: 'Brice Bold Condensed';
  src: url(assets/fonts/brice-bold-condensed.woff2) format('woff2'),
       url(assets/fonts/brice-bold-condensed.woff) format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Hero name "Anna Wielachowska" sits in a wide cyan box. Keep it on ONE line,
   sized to the text column (cqi) so it never overflows, CENTER it in the box, and
   render it in the Brice Bold Condensed webfont. */
.elementor-element-09b8c18 { container-type: inline-size; }
.elementor-element-1e1fd2e .elementor-heading-title {
  font-family: 'Brice Bold Condensed', serif !important;
  white-space: nowrap;
  font-size: min(6.5em, 13.5cqi) !important;   /* desktop capped at 6.5em; mobile scales via cqi (+15%) */
  text-align: center !important;
  line-height: 1.15;
}

/* Hero image: greyscale */
.elementor-element-604c8ee img {
  filter: grayscale(1);
}

/* About page: justify the three artist-statement paragraphs (both edges). */
.elementor-element-8392e79 .elementor-widget-container,
.elementor-element-99b744a .elementor-widget-container,
.elementor-element-7c7986c .elementor-widget-container {
  text-align: justify;
}

/* ---- Shop / "Paintings" archive -----------------------------------------
   Centered content column with grey margins (like the original demo), and uniform
   product image cells that scale-to-fit so nothing is cropped. Columns (2) and the
   1000px uncropped thumbnails are set as WooCommerce options (see woocommerce role). */
.woocommerce-shop #content.site-content { background: #f7f7f7; }
.woocommerce-shop #content .ast-container {
  max-width: 1120px;          /* ~centered column, margins show the grey behind */
  margin-left: auto;
  margin-right: auto;
}
.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap {
  background: #fff;
}
.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: auto !important;          /* natural proportions — no crop, no letterbox gaps */
  object-fit: initial !important;
}
/* Center the product name + price under the image (were left-aligned to its edge). */
.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
.woocommerce-shop ul.products li.product .price {
  text-align: center !important;
}

/* About page: the left portrait slot is empty (demo leftover) — hide it on ALL
   viewports. (When a real portrait is added, remove this and the desktop rules.) */
.elementor-element-8872224 { display: none !important; }

/* Desktop: with the image gone, don't let the text stretch the full boxed width.
   Stack it as a centered, max-width column with grey margins (matches the shop). */
@media (min-width: 768px) {
  /* Grey full-width background behind the About content (margins read as background). */
  .elementor-element-b14c4e8 { background: #f7f7f7; }
  /* The text column (ee66589) is an Elementor flex item pinned to --width:65% — once
     we hid the 35% image slot it stayed left. Override the width var and center it as
     a capped column (margin:auto centers a lone flex item). */
  .elementor-element-ee66589 {
    --width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile already stacks nicely; just trim the top padding left by the hidden slot. */
@media (max-width: 767px) {
  .elementor-element-ee66589 { padding-top: 24px !important; }
}