/* =====================================================================
   com_amscjenik - the public price list.

   WRITTEN FOR THIS SITE, NOT RENAMED FROM THE ONE IT WAS PORTED FROM.
   The NONO build's stylesheet carried that client's palette partly as
   var(--nn-*) tokens and partly as bare hex (#6E6155, #E3D8C6, #1E1712).
   A token rename catches the first kind and silently leaves the second, so
   the page comes out in somebody else's browns and nothing reports an
   error. Every colour below is stated fresh.

   rt_amsyseu is a DARK theme: near-black navy ground, blue-grey body text,
   violet and cyan accents, straight out of
   templates/rt_amsyseu/custom/config/27/styles.yaml. The page is designed
   to sit on that ground, and every colour is also given as a var() with
   the literal as its fallback, so the theme can take these over later
   without this file being edited.
   ===================================================================== */

.amsc-page {
    --amsc-ink:     var(--am-bg, #05070f);
    --amsc-ink-2:   var(--am-bg2, #0d1220);
    --amsc-text:    var(--am-text, #c3ccdd);
    --amsc-bright:  var(--am-text-active, #ffffff);
    --amsc-muted:   #8b95ab;
    --amsc-violet:  var(--am-accent1, #6c3bf5);
    --amsc-cyan:    var(--am-accent2, #22e1ff);
    --amsc-line:    rgba(168, 178, 198, .18);
    --amsc-radius:  12px;

    padding: clamp(2.5rem, 6vw, 5rem) 0;
    color: var(--amsc-text);
}

.amsc-shell {
    width: min(100% - 2rem, 1100px);
    margin-inline: auto;
}

/* --- page head ------------------------------------------------------ */
.amsc-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.amsc-eyebrow {
    margin: 0 0 .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amsc-cyan);
}

.amsc-title {
    margin: 0 0 .8rem;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    color: var(--amsc-bright);
}

.amsc-lead {
    margin: 0;
    max-width: 62ch;
    font-size: 1.05rem;
    line-height: 1.65;
}

/* --- headings ------------------------------------------------------- */
.amsc-family {
    margin: 2.8rem 0 .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--amsc-line);
    font-size: 1.5rem;
    color: var(--amsc-bright);
}

.amsc-family:first-of-type { margin-top: 0; }

.amsc-section {
    margin: 1.8rem 0 .4rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amsc-muted);
}

/* --- the rows -------------------------------------------------------
   A leader-dot row rather than a table: the price list has two columns of
   wildly different lengths ("Yamaha RIVAGE PM10 CS-R10 Control Surface"
   against "14.500,00 EUR") and a table makes the reader's eye travel
   across a gap with nothing in it. */
.amsc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.amsc-row {
    display: flex;
    /* baseline, not center: a service row is several lines tall and
       centring would drag its price down beside the second line. */
    align-items: baseline;
    gap: .5rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(168, 178, 198, .09);
}

.amsc-row__name {
    flex: 0 1 auto;
    color: var(--amsc-bright);
}

/* The leader sits on the FIRST line, not in the middle of the row. A
   product row is one line tall and centring looked right; a service row is
   five, and the dots ran straight through the middle of its description. */
.amsc-row__leader {
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 1px;
    align-self: flex-start;
    margin-top: .62em;
    border-bottom: 1px dotted rgba(168, 178, 198, .3);
}

.amsc-row__price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    text-align: right;
}

.amsc-price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--amsc-bright);
    white-space: nowrap;
}

/* Only the services carry a description - a product's belongs to
   VirtueMart. It sits under the name, in the name's column, so the price
   column stays a clean right-aligned stack of figures. */
.amsc-row__desc {
    display: block;
    max-width: 62ch;
    margin-top: .3rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--amsc-muted);
}

.amsc-sale {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(108, 59, 245, .22);
    border: 1px solid rgba(108, 59, 245, .45);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amsc-cyan);
    vertical-align: middle;
}

/* --- the anchor line -------------------------------------------------
   Never struck through, never a percentage, never called an "old price".
   It is a statement of what the price was on a stated date, and it has to
   be legible: the whole point of the rule is that a shopper can compare
   the two figures. Secondary in weight, not in size. */
.amsc-anchor {
    display: block;
    font-size: .85rem;
    color: var(--amsc-muted);
    white-space: nowrap;
}

.amsc-anchor__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--amsc-text);
}

.amsc-low30,
.amsc-net {
    font-size: .8rem;
    color: var(--amsc-muted);
    white-space: nowrap;
}

.amsc-low30 strong {
    font-variant-numeric: tabular-nums;
    color: var(--amsc-text);
}

/* --- notes ---------------------------------------------------------- */
.amsc-notes { margin-top: 2.5rem; }

.amsc-note {
    max-width: 70ch;
    margin: 0 0 .6rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--amsc-muted);
}

.amsc-empty {
    padding: 1.1rem 1.3rem;
    border-radius: var(--amsc-radius);
    border: 1px solid var(--amsc-line);
    background: var(--amsc-ink-2);
    font-size: 1rem;
    color: var(--amsc-text);
}

/* --- machine-readable block ------------------------------------------ */
.amsc-data {
    margin-top: 3rem;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border-radius: var(--amsc-radius);
    border: 1px solid var(--amsc-line);
    background: var(--amsc-ink-2);
}

.amsc-data h2 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    color: var(--amsc-bright);
}

.amsc-data h3 {
    margin: 1.8rem 0 .4rem;
    font-size: 1rem;
    color: var(--amsc-bright);
}

.amsc-data p { margin: 0 0 1rem; font-size: .92rem; }

.amsc-downloads { display: flex; flex-wrap: wrap; gap: .6rem; }

.amsc-feeds,
.amsc-archive {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}

.amsc-feeds li,
.amsc-archive li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    padding: .45rem 0;
    border-top: 1px solid rgba(168, 178, 198, .09);
}

.amsc-feeds li > span,
.amsc-archive li > span {
    flex: 0 0 4.5rem;
    font-weight: 700;
    color: var(--amsc-muted);
}

/* The feed URLs are long and are meant to be copied, so they wrap rather
   than being truncated with an ellipsis that hides half the address. */
.amsc-feeds li a {
    overflow-wrap: anywhere;
    color: var(--amsc-cyan);
}

.amsc-archive li a { color: var(--amsc-cyan); }

@media (max-width: 640px) {
    .amsc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
    }

    .amsc-row__leader { display: none; }

    .amsc-row__price { align-items: flex-start; text-align: left; }
}