/* pages/product.css — owns the product detail page: the price line, the option
   stack spacing and the size-guide toggle row. The gallery grid itself is in
   layout.css and the plates are in components/plate.css. */

.am-product__title { line-height: 1.05; }

.am-product__price-line {
  display: flex;
  gap: var(--am-gap-l);
  align-items: baseline;
  margin: var(--am-gap-m) 0 var(--am-gap-xl);
  flex-wrap: wrap;
}
.am-product__price { font-family: var(--am-font-display); font-weight: 500; font-size: 24px; }
.am-product__pack { font-size: var(--am-size-small); color: var(--am-text-meta); }
.am-product__rot-price { font-size: var(--am-size-body); color: var(--am-red); }

.am-product__desc {
  font-size: var(--am-size-body);
  line-height: var(--am-leading-copy);
  color: var(--am-text-muted);
  margin-bottom: var(--am-gap-2xl);
}

.am-product__option-label {
  font-size: var(--am-size-label);
  letter-spacing: var(--am-track-tight);
  text-transform: uppercase;
  color: var(--am-text-meta);
  margin-bottom: var(--am-gap-s);
}

.am-product__colours {
  display: flex;
  gap: 12px;
  margin-bottom: var(--am-gap-xl);
}

.am-product__size-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--am-gap-m);
  margin-bottom: var(--am-gap-s);
}
.am-product__size-guide-toggle {
  background: none;
  border: 0;
  font-size: var(--am-size-micro);
  text-decoration: underline;
  padding: 0;
  font-family: var(--am-font-body);
  color: var(--am-text);
}

.am-product__fit-note { margin-bottom: var(--am-gap-xl); }

/* The design places the "Choose a size first" error tight under the CTA row,
   pulling it up over the row's own bottom margin. */
.am-product__size-error { font-size: var(--am-size-small); color: var(--am-red); margin: -14px 0 16px; }
.am-product__size-error[hidden] { display: none; }

.am-product__option-label--flush { margin-bottom: 0; }