/* Lash Market — single product page components (lm-catalog).
   Only the plugin's own `lm-*` blocks live here; page layout stays in the
   theme's main.css. Colours/typography come from the theme design tokens, with
   literal fallbacks so the components still read correctly if the stylesheet
   is ever loaded without the theme bundle. */

/* ---- Brand eyebrow above the product title ------------------------------ */
.lm-brand {
  margin: 0 0 .5rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red, #ee3a29);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.lm-brand__name { color: inherit; text-decoration: none; }
.lm-brand a.lm-brand__name:hover { color: var(--red-deep, #cf2f20); text-decoration: underline; text-underline-offset: 3px; }
.lm-brand__sep { color: var(--muted, #8a8580); }

/* ---- Article number ------------------------------------------------------ */
.lm-sku {
  margin: 0 0 1rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .9rem;
  color: var(--muted, #8a8580);
  overflow-wrap: anywhere;
}
.lm-sku__label { letter-spacing: .04em; }
.lm-sku__value { color: var(--ink, #1a1917); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Availability pill --------------------------------------------------- */
.lm-stock {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.25rem;
  padding: .5rem 1rem .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line, #ece7de);
  background: var(--white, #fff);
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  max-width: 100%;
}
.lm-stock__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; }
.lm-stock__text { overflow-wrap: anywhere; }
.lm-stock--in { color: #1f7a4d; border-color: rgba(31,122,77,.28); background: rgba(31,122,77,.08); }
.lm-stock--low { color: #a86400; border-color: rgba(168,100,0,.28); background: rgba(168,100,0,.09); }
.lm-stock--backorder { color: var(--ink, #1a1917); border-color: var(--line, #ece7de); background: var(--cream, #f7f2ea); }
.lm-stock--out { color: var(--red-deep, #cf2f20); border-color: rgba(207,47,32,.25); background: rgba(207,47,32,.07); }

/* ---- Categories / tags meta block --------------------------------------- */
.woocommerce div.product .lm-meta {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line, #ece7de);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .88rem;
  color: var(--muted, #8a8580);
}
.lm-meta__row { display: block; }
.lm-meta__label { font-weight: 700; color: var(--ink, #1a1917); }
.lm-meta__value a { color: var(--red-deep, #cf2f20); text-decoration: none; }
.lm-meta__value a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Gallery placeholder (the whole 1C catalogue ships without photos) ---- */
.woocommerce div.product .lm-gallery-empty {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--line, #ece7de);
  border-radius: var(--radius, 18px);
  background:
    radial-gradient(120% 120% at 30% 20%, #fffdf9 0%, var(--cream, #f7f2ea) 62%, #f0e9de 100%);
  overflow: hidden;
}
/* The mark itself is a transparent SVG, so it sits on the tile's own gradient
   without a visible square edge. */
.woocommerce div.product .lm-gallery-empty__img {
  width: min(72%, 400px);
  height: auto;
  max-width: 100%;
  margin: 0;
  opacity: .92;
}

/* Same mark outside the gallery. This file only loads on single-product pages,
   so in practice that means the related/upsell strips; on catalogue cards the
   theme already paints an opaque tile behind the transparent SVG
   (`.product-media { background: #f4efe8 }`). */
.lm-placeholder { background: var(--cream, #f7f2ea); }
.lm-gallery-empty__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(.9rem, 3vw, 1.6rem);
  transform: translateX(-50%);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #8a8580);
  white-space: nowrap;
}

/* The gallery wrapper ships with inline `opacity: 0` that WooCommerce's script
   clears once the gallery boots. Nothing boots for the image-less case, so the
   placeholder would stay invisible if that script is deferred or blocked. */
.woocommerce div.product .woocommerce-product-gallery--without-images { opacity: 1 !important; }
/* The theme rounds and white-fills the gallery wrapper for real photos; behind
   the placeholder tile that leaves a pale sliver along the rounded corners. */
.woocommerce div.product .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper {
  background: transparent;
  border-radius: 0;
}

/* ---- Specification table ------------------------------------------------- */
/* Border and rounding live on the wrapper: `overflow: hidden` on a <table>
   does not reliably clip its own corner cells, and the wrapper has to be the
   scroll container anyway so a wide value can never overflow the page. */
.lm-attrs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #ece7de);
  border-radius: var(--radius-sm, 12px);
  background: var(--white, #fff);
}
.woocommerce div.product .lm-attrs table.shop_attributes {
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  background: transparent;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .95rem;
}
.woocommerce div.product .lm-attrs table.shop_attributes th,
.woocommerce div.product .lm-attrs table.shop_attributes td {
  border: 0 !important;
  border-bottom: 1px solid var(--line, #ece7de) !important;
  padding: .85rem 1.1rem !important;
  font-style: normal !important;
  line-height: 1.5;
  vertical-align: top;
}
.woocommerce div.product .lm-attrs table.shop_attributes tr:last-child th,
.woocommerce div.product .lm-attrs table.shop_attributes tr:last-child td { border-bottom: 0 !important; }
.woocommerce div.product .lm-attrs table.shop_attributes th {
  width: 38%;
  min-width: 9rem;
  text-align: left;
  font-weight: 700;
  color: var(--ink, #1a1917);
  background: rgba(247,242,234,.55);
}
.woocommerce div.product .lm-attrs table.shop_attributes td { color: #4a4640; overflow-wrap: anywhere; }
.woocommerce div.product .lm-attrs table.shop_attributes td p { margin: 0; padding: 0 !important; }
.woocommerce div.product .lm-attrs table.shop_attributes td a { color: var(--red-deep, #cf2f20); }

@media (max-width: 520px) {
  .woocommerce div.product .lm-attrs table.shop_attributes th { width: 45%; min-width: 7rem; }
  .woocommerce div.product .lm-attrs table.shop_attributes th,
  .woocommerce div.product .lm-attrs table.shop_attributes td { padding: .7rem .85rem !important; }
}