/**
 * What: The one product line (includes/product-line.php), on every page that lists products.
 * Why:  Owner, 2026-10-25: one shared product line instead of four stylesheets for one layout. A
 *       change to how a product reads is made here, once, and every page has it.
 * How:  A two-column grid, 70:30: the name and the options on the left; the picture on the right,
 *       the quantity a badge on its corner; on the second row the page's controls (if any) on the
 *       left and the amount on the right, under the picture. Each page sets the two text sizes it
 *       uses through --bss-line-text and --bss-line-sub (the checkout's by default); nothing else
 *       here is page-specific.
 */

.bss-line {
  --bss-line-text: var(--bss-ck-text, 1rem);
  --bss-line-sub: var(--bss-ck-text-sub, 0.875rem);
  /*
   * The options, one step under the small size (owner, 2026-10-25: "smaller font for options"):
   * 10px on every page and width — supporting detail under the name, not text to read first.
   */
  --bss-line-meta: 0.625rem;
  --bss-line-media: 7.5rem;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  grid-template-areas:
    "body    media"
    "actions amount";
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  align-items: start;
  font-size: var(--bss-line-text);
  line-height: 1.35;
  text-align: left;
}

/*
 * A line with no options (owner, 2026-10-25: "consider whether a product has options, so the name,
 * image and price align"): a smaller picture, the name centred against it, the amount under it.
 * A full-size picture beside a two-line name left the name floating and the price far below it.
 */
.bss-line--plain {
  --bss-line-media: 4.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.bss-line--plain .bss-line__body {
  align-self: center;
}

/* In an auto-width column a percentage width has nothing to resolve against: a fixed one. */
.bss-line--plain .bss-line__media {
  width: var(--bss-line-media);
}

.bss-line__body {
  grid-area: body;
  min-width: 0;
}

/* The picture: the column's width up to a limit, square, its own box the badge is placed on. */
.bss-line__media {
  grid-area: media;
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: var(--bss-line-media);
}

/* No display here: a page may hide its pictures by display (the checkout's "hide images" control). */
.bss-line .bss-line__media > :not(.bss-line__qty) {
  position: static;
  float: none;
  width: 100%;
  margin: 0;
}

.bss-line .bss-line__media > a {
  display: block;
}

.bss-line .bss-line__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 1;
  object-fit: contain;
}

/* The quantity: a badge on the picture's top-right corner, inside it, so no panel edge clips it. */
.bss-line .bss-line__qty {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 1;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #1f2937;
  color: #fff;
  font-size: var(--bss-line-sub);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* WooCommerce's quantity filters return their own <strong>; it takes the badge's look. */
.bss-line .bss-line__qty > * {
  color: inherit;
  font: inherit;
}

/* The name: small, two lines at most (the full name is in the markup and the link). */
.bss-line .bss-line__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--bss-line-sub);
  font-weight: 600;
  line-height: 1.35;
}

/* One class more than Breakdance's `.breakdance-woocommerce .mini_cart_item a` (link blue, medium). */
.bss-line .bss-line__body .bss-line__name a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.bss-line .bss-line__amount {
  grid-area: amount;
  align-self: center;
  justify-self: end;
  font-size: var(--bss-line-text);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.bss-line .bss-line__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  align-self: center;
}

/* -------------------------------------------------------------------------------------------- */
/* The options: one line each, "Memory: 16GB DDR4 Lap… (+₹2,000)"                                 */
/* -------------------------------------------------------------------------------------------- */

/*
 * The label and the amount an option added stay whole; only the option's name is cut. A cart line
 * prints them as WooCommerce's <dl class="variation">, an order line as <ul class="wc-item-meta">
 * with each <li> a label and a <p>; both become rows of one two-column grid, so the values line up.
 * bss-cpq wraps an option's name and amount in spans (bss-option__text / __amount); a row from
 * another plugin has none and is cut as a whole.
 */
.bss-line .bss-line__meta {
  /* Breakdance sizes option text from this, with !important: the options' size, not its own. */
  --bde-woo-typography__size-small: var(--bss-line-meta);
  margin-top: 0.2rem;
  font-size: var(--bss-line-meta);
  line-height: 1.4;
  opacity: 0.85;
}

.bss-line .bss-line__meta dl.variation,
.bss-line .bss-line__meta ul.wc-item-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.bss-line .bss-line__meta ul.wc-item-meta li {
  display: contents;
}

.bss-line .bss-line__meta ul.wc-item-meta li::before,
.bss-line .bss-line__meta dl.variation dd::after {
  content: none;
}

.bss-line .bss-line__meta dt,
.bss-line .bss-line__meta .wc-item-meta-label {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
}

.bss-line .bss-line__meta dd,
.bss-line .bss-line__meta ul.wc-item-meta li > p {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bss-line .bss-line__meta dd p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bss-line .bss-line__meta dd p:has(.bss-option__text),
.bss-line .bss-line__meta ul.wc-item-meta li > p:has(.bss-option__text) {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
}

.bss-line .bss-option__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bss-line .bss-option__amount {
  flex: none;
}

/* Heard, not seen ("Quantity:" before the badge's number). */
.bss-line .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}