/**
 * Specification table — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained: drop the module into any PrestaShop 9 shop and the table
 * renders correctly with neutral defaults. A theme restyles it by setting the
 * --kspc-* custom properties declared on `.kicked-specs`, never by overriding
 * selectors.
 *
 *   .kicked-specs {
 *     --kspc-key-color: var(--my-muted);
 *     --kspc-rule: 1px solid var(--my-border);
 *   }
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without having to match load order or
 * out-specify a selector.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-specs {
  .kicked-specs {
    --kspc-rule: 1px solid #e4e4e7;
    --kspc-key-color: #71717a;
    --kspc-key-width: 42%;
    --kspc-value-color: #18181b;
    --kspc-row-padding: 0.625rem 0;
    --kspc-font-size: 0.9375rem;

    margin-block: 0.5rem 0;
  }

  .kicked-specs__table {
    width: 100%;
    font-size: var(--kspc-font-size);
    border-collapse: collapse;
  }

  .kicked-specs__row + .kicked-specs__row > * {
    border-top: var(--kspc-rule);
  }

  .kicked-specs__key,
  .kicked-specs__value {
    padding: var(--kspc-row-padding);
    text-align: start;
    vertical-align: top;
  }

  .kicked-specs__key {
    width: var(--kspc-key-width);
    font-weight: 400;
    color: var(--kspc-key-color);
  }

  .kicked-specs__value {
    color: var(--kspc-value-color);

    /* Authored line breaks are the only formatting a value carries — the text
       is printed escaped, so this is how a two-line value stays two lines. */
    white-space: pre-line;
  }

  /* On a phone the two columns leave the value about twenty characters, which
     wraps every entry into a column of fragments. Stacked, each pair reads as
     a short line of its own. */
  @media (max-width: 35.9375rem) {
    .kicked-specs__row,
    .kicked-specs__key,
    .kicked-specs__value {
      display: block;
      width: auto;
    }

    .kicked-specs__key {
      padding-block: 0.5rem 0;
    }

    .kicked-specs__value {
      padding-block: 0 0.5rem;
    }

    .kicked-specs__row + .kicked-specs__row > .kicked-specs__key {
      border-top: var(--kspc-rule);
    }

    .kicked-specs__row + .kicked-specs__row > .kicked-specs__value {
      border-top: 0;
    }
  }
}