/*
 * The license storefront.
 *
 * NO FIGURE IN THIS FILE IS A PRICE. Every number here is a length, a duration,
 * an opacity or a z-index. Prices are printed by PHP from the portal's rows and
 * recomputed by the script from the JSON block on the page.
 *
 * WHAT THIS INHERITS RATHER THAN INVENTS. The colours, both families and the
 * type scale are the theme's own, read off the compiled theme.css rather than
 * remembered: cream #FFF4E0 page, ink #293A4A body, #1E2D3B headings and dark
 * surfaces, sand #EFDFBE fields, blue #2C5C8A primary, red #D91B1F for the one
 * money action, and a 16%-ink hairline. They are declared once as custom
 * properties below because a plugin stylesheet cannot read the theme's LESS
 * variables; that block is the only place a theme colour is written down, so a
 * restyle is one edit rather than a hunt. Where a UIkit class already carries
 * the value - .uk-input, .uk-form-label, .uk-button-default, .uk-table - the
 * class is used and nothing is redeclared.
 *
 * ONE REAL WEIGHT EXISTS FOR EACH FAMILY. The theme ships Montserrat 400 and
 * Advent Pro 400 and nothing else, so asking for bold gets a synthesised face
 * that reads as smeared. Hierarchy on this page therefore comes from size, from
 * the switch between the two families, and from colour - never from weight.
 *
 * BORDER RADIUS IS ZERO SITE-WIDE. Every corner here is square on purpose.
 */

.cc-shop {
    /* The theme's palette, in one place. See the note above. */
    --cc-page: #FFF4E0;
    --cc-sand: #EFDFBE;
    --cc-ink: #293A4A;
    --cc-ink-strong: #1E2D3B;
    --cc-ink-muted: #4A5A6A;
    --cc-blue: #2C5C8A;
    --cc-blue-deep: #1F4568;
    --cc-red: #D91B1F;
    --cc-red-deep: #B31114;
    --cc-amber: #F7DDA4;
    --cc-inverse: #FFF4E0;
    --cc-inverse-muted: #E2D5BE;

    --cc-line: rgba(41, 58, 74, 0.16);
    --cc-line-strong: rgba(41, 58, 74, 0.3);
    --cc-line-inverse: rgba(255, 244, 224, 0.2);
    /*
     * A control whose only boundary is a hairline needs that hairline to carry
     * 3:1 against the page, or the control is not visibly a control. This is
     * that value, measured: ink at 62% over cream lands at 3.6:1.
     */
    --cc-line-control: rgba(41, 58, 74, 0.62);
    --cc-line-field: rgba(41, 58, 74, 0.55);

    --cc-display: 'Advent Pro', sans-serif;

    /*
     * A fine fractal grain, used only on the dark plaques. It gives them the
     * material depth a flat fill has none of, and unlike a page-wide grain it
     * has no visible edge where the container stops.
     */
    --cc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");

    /* The right rail is set once and every band above it lines up to it. */
    --cc-rail: 360px;
    --cc-gutter: 56px;

    /*
     * The site pins its navbar with uk-sticky, and a pinned navbar is a 50px
     * strip of the viewport that anything sticky here has to start below. This
     * is measured off the running site, not assumed: `.uk-sticky-fixed` reports
     * a 50px box at top 0, which matches @navbar-nav-item-height in the theme.
     * Anything sticky on this page starts below it.
     */
    --cc-pinned-top: 50px;

    --cc-ease: cubic-bezier(0.16, 1, 0.3, 1);

    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    color: var(--cc-ink);
}

.cc-shop *,
.cc-shop *::before,
.cc-shop *::after {
    box-sizing: border-box;
}

.cc-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cc-shop :focus-visible {
    outline: 3px solid var(--cc-blue);
    outline-offset: 2px;
}

.cc-order :focus-visible,
.cc-bar :focus-visible {
    outline-color: var(--cc-amber);
}

/* The three dark plaques on these pages are one material, declared once. */
.cc-intro__claim,
.cc-order__inner,
.cc-bar,
.cc-receipt__charge {
    background-color: var(--cc-ink-strong);
    background-image: var(--cc-grain);
    color: var(--cc-inverse);
}

/* ---------------------------------------------------------------- intro -- */

.cc-intro {
    display: grid;
    gap: 32px;
    padding-bottom: 52px;
}

.cc-intro__title {
    margin: 0;
    font-family: var(--cc-display);
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--cc-ink-strong);
    text-wrap: balance;
}

.cc-intro__stand {
    margin: 20px 0 0;
    max-width: 42ch;
    font-size: 20px;
    line-height: 1.5;
    color: var(--cc-ink);
    text-wrap: pretty;
}

/*
 * The three refusals get their own surface rather than a third paragraph. It is
 * the one thing on the first screen that has to land without being read.
 */
.cc-intro__claim {
    margin: 0;
    align-self: end;
    padding: 30px 32px;
    font-family: var(--cc-display);
    font-size: 27px;
    line-height: 1.28;
    text-wrap: balance;
    box-shadow: 0 18px 44px -26px rgba(30, 45, 59, 0.65);
}

/* ------------------------------------------------------------ the frame -- */

.cc-shop__body {
    display: grid;
    gap: 56px;
}

/* -------------------------------------------------------------- the shelf */

.cc-shelf__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
    margin-bottom: 22px;
}

.cc-shelf__title,
.cc-addons__title,
.cc-checkout__title,
.cc-after__title {
    margin: 0;
    color: var(--cc-ink-strong);
    letter-spacing: -0.01em;
}

/*
 * The filter is a script-only control, so it is laid out but invisible until
 * the script confirms it works. Reserving the space rather than inserting it
 * later keeps the shelf from jumping after load.
 */
.cc-shelf__filter {
    visibility: hidden;
    flex: 0 1 260px;
}

.cc-js .cc-shelf__filter {
    visibility: visible;
}

.cc-shelf__filter-label,
.cc-seats__label,
.cc-shelf__col,
.cc-order__total-label,
.cc-bar__label,
.cc-receipt__reference {
    font-family: var(--cc-display);
    font-size: 16px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}

.cc-shelf__filter-label {
    display: block;
    margin-bottom: 6px;
}

.cc-shop .cc-shelf__filter-input {
    height: 46px;
    padding: 0 14px;
    font-size: 20px;
    box-shadow: inset 0 -2px 0 0 var(--cc-line-field);
}

.cc-shelf__columns {
    display: none;
}

.cc-shelf__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-row {
    display: grid;
    gap: 2px 24px;
    padding: 16px 12px;
    margin: 0 -12px;
    border-bottom: 1px solid var(--cc-line);
    transition: background-color 0.15s ease-out;
}

.cc-row:hover {
    background-color: rgba(41, 58, 74, 0.04);
}

/*
 * The picked row goes warm rather than blue. A blue wash at low alpha over a
 * cream page desaturates to grey and reads as disabled - the opposite of what
 * the state means - so the tint comes from the sand already used for every
 * input on the site.
 */
.cc-row.is-added {
    background-color: rgba(239, 223, 190, 0.62);
}

.cc-row[hidden] {
    display: none;
}

.cc-row__name {
    margin: 0;
    font-family: var(--cc-display);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--cc-ink-strong);
    align-self: center;
}

.cc-row__price {
    margin: 0;
    align-self: center;
}

.cc-row__figure,
.cc-addon__figure {
    display: block;
    font-family: var(--cc-display);
    font-size: 30px;
    line-height: 1.05;
    color: var(--cc-ink-strong);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.cc-row__unit,
.cc-addon__unit {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--cc-ink-muted);
}

.cc-row__controls,
.cc-addon__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-shelf__none {
    margin: 0;
    padding: 44px 4px;
    font-size: 22px;
    color: var(--cc-ink-muted);
}

.cc-shelf__none[hidden] {
    display: none;
}

/* ------------------------------------------------------------ the seats -- */

/*
 * Flex rather than block at every width. As a block it wraps the inline-flex
 * control in a line box, and the line box carries the font's descender space -
 * seven invisible pixels per row, which over twenty rows is most of a screen.
 */
.cc-seats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.cc-seats__control {
    display: flex;
    align-items: stretch;
    height: 46px;
    background: var(--cc-sand);
    border: 1px solid var(--cc-line-control);
}

.cc-seats__step {
    position: relative;
    width: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cc-ink-strong);
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

/* The bars are drawn rather than typed, so both signs share one stroke. */
.cc-seats__step span {
    display: none;
}

.cc-seats__step::before,
.cc-seats__step::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.cc-seats__step::before {
    width: 13px;
    height: 2px;
}

.cc-seats__step[data-cc-step="1"]::after {
    width: 2px;
    height: 13px;
}

.cc-seats__step:hover {
    background: rgba(41, 58, 74, 0.12);
}

.cc-seats__step:disabled {
    color: var(--cc-ink-muted);
    opacity: 0.4;
    cursor: not-allowed;
}

.cc-seats__step:disabled:hover {
    background: transparent;
}

.cc-shop .cc-seats__field {
    width: 52px;
    height: 44px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--cc-ink-strong);
    font-family: var(--cc-display);
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cc-seats__field::-webkit-outer-spin-button,
.cc-seats__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ------------------------------------------------------------- add / added */

/*
 * Deliberately not red. Red is the site's single accent and on this page it
 * belongs to the one button that takes money; an Add that shouted the same
 * would put twenty-two of them on the screen ahead of it.
 */
.cc-add {
    flex: 0 0 auto;
    height: 46px;
    min-width: 92px;
    padding: 0 18px;
    border: 1px solid var(--cc-line-control);
    background: transparent;
    color: var(--cc-ink-strong);
    font-family: var(--cc-display);
    font-size: 20px;
    line-height: 44px;
    cursor: pointer;
    transition: background-color 0.18s var(--cc-ease), color 0.18s var(--cc-ease),
        border-color 0.18s var(--cc-ease);
}

.cc-add:hover {
    background: var(--cc-ink-strong);
    border-color: var(--cc-ink-strong);
    color: var(--cc-inverse);
}

.cc-add[aria-pressed="true"] {
    background: var(--cc-blue);
    border-color: var(--cc-blue);
    color: var(--cc-inverse);
}

.cc-add[aria-pressed="true"]:hover {
    background: var(--cc-blue-deep);
    border-color: var(--cc-blue-deep);
}

.cc-add__done,
.cc-add[aria-pressed="true"] .cc-add__idle {
    display: none;
}

.cc-add[aria-pressed="true"] .cc-add__done {
    display: inline;
}

/* ----------------------------------------------------------- the add-ons -- */

.cc-addons {
    padding: 34px 32px 30px;
    background: var(--cc-sand);
}

.cc-addons__intro {
    margin: 12px 0 0;
    max-width: 52ch;
    font-size: 20px;
    line-height: 1.5;
    color: var(--cc-ink);
}

.cc-addons__list {
    display: grid;
    gap: 26px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.cc-addon {
    padding-top: 22px;
    border-top: 1px solid var(--cc-line-strong);
}

.cc-addon__name {
    margin: 0;
    font-family: var(--cc-display);
    font-size: 26px;
    line-height: 1.15;
    color: var(--cc-ink-strong);
}

.cc-addon__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0 0;
}

.cc-addon__unit {
    margin-top: 0;
}

.cc-addon__needs {
    margin: 12px 0 0;
    max-width: 40ch;
    font-size: 18px;
    line-height: 1.45;
    color: var(--cc-ink-muted);
}

.cc-addon__controls {
    margin-top: 18px;
}

/* ------------------------------------------------------- the order panel -- */

.cc-order__inner {
    padding: 30px 28px 28px;
    box-shadow: 0 24px 60px -34px rgba(30, 45, 59, 0.7);
}

.cc-order__title {
    margin: 0 0 20px;
    font-family: var(--cc-display);
    font-size: 26px;
    line-height: 1.2;
    color: var(--cc-inverse);
}

.cc-order__empty {
    margin: 0;
    padding-bottom: 22px;
    font-size: 20px;
    color: var(--cc-inverse-muted);
}

.cc-order__empty[hidden] {
    display: none;
}

.cc-order__lines {
    margin: 0;
    padding: 0 0 20px;
    list-style: none;
}

.cc-order__lines[hidden] {
    display: none;
}

.cc-order__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cc-line-inverse);
}

.cc-order__line:first-child {
    padding-top: 0;
}

.cc-order__line-name {
    font-size: 18px;
    line-height: 1.3;
    color: var(--cc-inverse);
}

.cc-order__line-meta {
    grid-column: 1;
    font-size: 15px;
    color: var(--cc-inverse-muted);
    font-variant-numeric: tabular-nums;
}

.cc-order__line-amount {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-family: var(--cc-display);
    font-size: 22px;
    color: var(--cc-inverse);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cc-order__line--enter {
    animation: cc-line-in 0.28s var(--cc-ease) both;
}

@keyframes cc-line-in {
    from {
        clip-path: inset(0 100% 0 0);
        transform: translateY(5px);
    }
    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

.cc-order__total[hidden] {
    display: none;
}

.cc-order__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--cc-line-inverse);
}

.cc-order__total-label {
    color: var(--cc-inverse-muted);
}

.cc-order__total-value {
    font-family: var(--cc-display);
    font-size: 42px;
    line-height: 1;
    color: var(--cc-inverse);
    font-variant-numeric: tabular-nums;
}

.cc-order__total-value.is-changed {
    animation: cc-settle 0.34s var(--cc-ease);
}

@keyframes cc-settle {
    0% {
        transform: scale(1.06);
        opacity: 0.55;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

.cc-order__term {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cc-inverse-muted);
}

/* -------------------------------------------------------------- the form -- */

.cc-form {
    display: grid;
    gap: 24px 28px;
    margin-top: 24px;
}

.cc-shop .uk-form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--cc-ink-strong);
}

.cc-shop .cc-form .uk-input {
    height: 54px;
    padding: 0 16px;
    font-size: 20px;
    box-shadow: inset 0 -2px 0 0 var(--cc-line-field);
}

.cc-shop .cc-form .uk-input.uk-form-danger {
    box-shadow: inset 0 -2px 0 0 var(--cc-red);
}

.cc-form__note {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--cc-ink-muted);
}

.cc-form__alert {
    margin: 0;
    padding: 16px 20px;
    background: rgba(217, 27, 31, 0.11);
    color: var(--cc-red-deep);
    font-size: 20px;
    line-height: 1.45;
}

.cc-form__alert[hidden] {
    display: none;
}

.cc-form__submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.cc-shop .cc-pay {
    height: 60px;
    line-height: 56px;
    padding: 0 42px;
    font-size: 26px;
}

/*
 * Mid-submit the button keeps its label and its colour and grows a moving
 * strip along the 2px bottom edge the theme already gives every button. The
 * wait is shown where the click landed rather than by a spinner somewhere else.
 *
 * The `:disabled` half of the selector is load-bearing. The button is disabled
 * while the request is in flight, and UIkit's own disabled styling drains it to
 * a pale slab with grey text - which reads as a control that refused the click
 * rather than one that is working on it. Restating the colour here, at a
 * specificity that clears `.uk-button:disabled`, is what keeps the two states
 * distinguishable.
 */
.cc-shop .cc-pay[aria-busy="true"],
.cc-shop .cc-pay[aria-busy="true"]:disabled {
    cursor: progress;
    opacity: 1;
    background-color: var(--cc-red);
    color: var(--cc-inverse);
    background-image: linear-gradient(90deg,
        rgba(255, 244, 224, 0) 0%,
        rgba(255, 244, 224, 0.9) 50%,
        rgba(255, 244, 224, 0) 100%);
    background-repeat: no-repeat;
    background-size: 45% 3px;
    background-position: -45% 100%;
    animation: cc-sweep 1.1s linear infinite;
}

@keyframes cc-sweep {
    to {
        background-position: 145% 100%;
    }
}

.cc-form__stripe {
    margin: 0;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.45;
    color: var(--cc-ink-muted);
}

/* ------------------------------------------------------------ after you pay */

.cc-after {
    display: grid;
    gap: 16px 56px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--cc-line);
}

.cc-after__body {
    margin: 0;
    max-width: 62ch;
    font-size: 22px;
    line-height: 1.55;
}

/* ------------------------------------------------------- the phone summary */

.cc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    box-shadow: 0 -14px 34px -22px rgba(30, 45, 59, 0.9);
}

.cc-bar[hidden] {
    display: none;
}

.cc-bar__button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cc-bar__label {
    color: var(--cc-inverse-muted);
}

.cc-bar__value {
    flex: 1 1 auto;
    font-family: var(--cc-display);
    font-size: 30px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cc-bar__chevron {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-right: 2px solid var(--cc-inverse-muted);
    border-bottom: 2px solid var(--cc-inverse-muted);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 0.2s var(--cc-ease);
}

.cc-bar__button[aria-expanded="true"] .cc-bar__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.cc-bar__lines {
    margin: 0;
    padding: 0 20px 18px;
    list-style: none;
    max-height: 42vh;
    overflow-y: auto;
}

.cc-bar__lines[hidden] {
    display: none;
}

.cc-bar__lines .cc-order__line:first-child {
    padding-top: 12px;
    border-top: 1px solid var(--cc-line-inverse);
}

/* ----------------------------------------------------------- the receipt -- */

.cc-receipt {
    padding-top: 8px;
}

.cc-receipt__title,
.cc-note__title {
    margin: 0;
    font-family: var(--cc-display);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--cc-ink-strong);
    text-wrap: balance;
}

.cc-receipt__title {
    font-size: clamp(42px, 5.4vw, 72px);
}

.cc-receipt__reference {
    margin: 22px 0 0;
}

.cc-receipt__code {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    background: var(--cc-sand);
    color: var(--cc-ink-strong);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

/* The amount is the one thing a buyer came back to check, so it gets the same
   plaque the shop's opening statement uses rather than another line of text. */
.cc-receipt__charge {
    display: inline-block;
    margin: 24px 0 0;
    padding: 20px 30px;
    font-family: var(--cc-display);
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 18px 44px -26px rgba(30, 45, 59, 0.65);
}

.cc-receipt__lines {
    margin-top: 48px;
}

.cc-shop .cc-receipt__table {
    margin: 0;
    max-width: 900px;
    font-size: 20px;
}

.cc-shop .cc-receipt__table th,
.cc-shop .cc-receipt__table td {
    padding: 16px 0;
    text-align: left;
    vertical-align: baseline;
    text-transform: none;
    border-bottom: 1px solid var(--cc-line);
}

.cc-shop .cc-receipt__table thead th {
    padding-top: 0;
    font-family: var(--cc-display);
    font-size: 16px;
    font-weight: inherit;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}

.cc-shop .cc-receipt__table .cc-receipt__name {
    font-family: var(--cc-display);
    font-size: 24px;
    font-weight: inherit;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cc-ink-strong);
}

.cc-shop .cc-receipt__table .cc-receipt__th-num,
.cc-shop .cc-receipt__table .cc-receipt__num {
    width: 130px;
    padding-left: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-shop .cc-receipt__table .cc-receipt__foot-label {
    font-family: var(--cc-display);
    font-size: 16px;
    font-weight: inherit;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    border-bottom: 0;
    border-top: 2px solid var(--cc-ink-strong);
}

.cc-shop .cc-receipt__table .cc-receipt__foot-value {
    font-family: var(--cc-display);
    font-size: 34px;
    line-height: 1.1;
    color: var(--cc-ink-strong);
    border-bottom: 0;
    border-top: 2px solid var(--cc-ink-strong);
}

.cc-receipt__close {
    margin: 40px 0 0;
    max-width: 62ch;
    font-size: 22px;
    line-height: 1.55;
}

/* ------------------------------------------------- the one-statement pages */

/*
 * These carry one sentence each. Set small they read as an error slip on a
 * blank field; set at full display size against a rule that runs the width of
 * the page they read as a statement, which is what they are.
 */
.cc-note {
    margin-top: 8px;
    padding: 76px 0 104px;
    border-top: 2px solid var(--cc-ink-strong);
}

.cc-note__title {
    font-size: clamp(52px, 8vw, 108px);
    max-width: 15ch;
}

.cc-note__inner {
    max-width: 34ch;
}

.cc-note__body {
    margin: 30px 0 0;
    font-size: 26px;
    line-height: 1.45;
    text-wrap: balance;
}

.cc-note__link {
    color: var(--cc-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.cc-note__link:hover {
    color: var(--cc-blue-deep);
}

/* -------------------------------------------------------------- breakpoints */

/*
 * Four thresholds, each set by what the layout needs at that point rather than
 * by a device name. They are ordered narrow-first, so where two overlap the
 * wider rule is the one that lands.
 *
 *   640  two things fit side by side: the add-on panels, and the form fields.
 *   700  the shelf is wide enough to be a ledger - name, price, seats, action on
 *        one line, with the price a true column and the unit said once above it.
 *  1200  and only here, wide enough for that ledger AND a 360px order rail
 *        beside it.
 *
 * The 1200 figure is measured, not chosen. At 1024 the rail left the plan names
 * 135px, which wrapped one product name onto five lines and pushed the column
 * labels into each other. The rail needs the ledger to still have room, and
 * below this width it does not - so the order summary goes inline and the
 * pinned bar carries the running total, which is what it already does on a
 * phone.
 */

@media (max-width: 699px) {
    .cc-shop--has-bar {
        padding-bottom: 96px;
    }

    .cc-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px 12px;
    }

    .cc-row__price {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 4px;
    }

    .cc-row__unit {
        margin-top: 0;
    }

    .cc-row__controls {
        margin-top: 12px;
        justify-content: space-between;
    }

    .cc-addons {
        margin-left: -16px;
        margin-right: -16px;
        padding: 30px 20px 26px;
    }

    .cc-shop .cc-pay {
        width: 100%;
    }

    .cc-form__submit {
        align-items: stretch;
    }

    /* The receipt table stops being a table on a phone and becomes one block
       per line, with each figure carrying the heading it sat under. */
    .cc-shop .cc-receipt__table,
    .cc-shop .cc-receipt__table thead,
    .cc-shop .cc-receipt__table tbody,
    .cc-shop .cc-receipt__table tfoot,
    .cc-shop .cc-receipt__table tr,
    .cc-shop .cc-receipt__table th,
    .cc-shop .cc-receipt__table td {
        display: block;
        width: auto;
        text-align: left;
    }

    .cc-shop .cc-receipt__table thead {
        display: none;
    }

    .cc-shop .cc-receipt__table tbody tr {
        padding: 18px 0;
        border-bottom: 1px solid var(--cc-line);
    }

    /* These carry the element as well as the class because the desktop rules
       they replace are three classes deep; two classes would silently lose. */
    .cc-shop .cc-receipt__table tbody th.cc-receipt__name,
    .cc-shop .cc-receipt__table tbody td.cc-receipt__num {
        width: auto;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }

    .cc-shop .cc-receipt__table tbody td.cc-receipt__num {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 20px;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
    }

    .cc-shop .cc-receipt__table tbody td.cc-receipt__num::before {
        content: attr(data-cc-th);
        font-family: var(--cc-display);
        font-size: 16px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--cc-ink-muted);
    }

    .cc-shop .cc-receipt__table tfoot th.cc-receipt__foot-label {
        width: auto;
        padding: 20px 0 0;
        text-align: left;
    }

    .cc-shop .cc-receipt__table tfoot td.cc-receipt__foot-value {
        width: auto;
        padding: 4px 0 0;
        text-align: left;
        border-top: 0;
    }

    .cc-note {
        padding: 48px 0 72px;
    }

    /* The statement has to stay louder than the sentence under it, and at this
       width the display size is already at its floor - so the body moves. */
    .cc-note__body {
        font-size: 22px;
    }
}

@media (min-width: 640px) {
    .cc-addons__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 36px;
    }

    .cc-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-form__alert,
    .cc-form__submit {
        grid-column: 1 / -1;
    }

    .cc-after {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    }
}

@media (min-width: 700px) {
    .cc-intro__stand {
        font-size: 24px;
    }

    .cc-intro__claim {
        font-size: 31px;
        padding: 34px 34px;
    }

    /*
     * The ledger. The third column is stated rather than left to `auto`: the
     * header contents are narrower than a row of controls, so `auto` sized the
     * two grids differently and the labels stopped standing over the things they
     * label. 234px is the seat control plus its gap plus the button, and the
     * button min-width holds through the Add / Added swap, so a row never
     * reflows when it is picked. The price column is only as wide as a figure,
     * which is what lets the leader run close to it.
     */
    .cc-shelf__columns,
    .cc-row {
        grid-template-columns: minmax(0, 1fr) 96px 234px;
    }

    /*
     * Two pinned strips now sit over the top of the page - the navbar and the
     * column header - so a row scrolled to by the keyboard would otherwise
     * arrive underneath them with its focused control out of sight.
     */
    .cc-row {
        scroll-margin-top: calc(var(--cc-pinned-top) + 56px);
    }

    /*
     * Pinned under the navbar the site pins, because it carries the unit that
     * used to sit under every price. A label said once has to stay on screen, or
     * the twentieth row is a column of figures with no unit anywhere.
     */
    .cc-shelf__columns {
        display: grid;
        position: sticky;
        top: var(--cc-pinned-top);
        z-index: 1;
        gap: 24px;
        padding: 12px 12px 10px;
        margin: 0 -12px;
        background: var(--cc-page);
        border-bottom: 1px solid var(--cc-line);
    }

    .cc-shelf__col--name {
        grid-column: 1;
        grid-row: 1;
    }

    /*
     * Spans the name and price columns and aligns to the right of them, so the
     * phrase has the room it needs without the price column being widened to fit
     * it - widening the column is what opens a gap between leader and figure.
     */
    .cc-shelf__col--price {
        grid-column: 1 / 3;
        grid-row: 1;
        text-align: right;
        white-space: nowrap;
    }

    .cc-shelf__col--seats {
        grid-column: 3;
        grid-row: 1;
    }

    /*
     * A ledger row leaves a wide gap between a short plan name and a
     * right-aligned price. The leader is what a tariff sheet has always used to
     * carry the eye across it, and without one the two halves read as unrelated.
     */
    .cc-row__name {
        display: flex;
        align-items: baseline;
        gap: 18px;
    }

    .cc-row__name::after {
        content: "";
        flex: 1 1 auto;
        align-self: flex-end;
        margin-bottom: 8px;
        border-bottom: 1px dotted var(--cc-line-strong);
    }

    .cc-row__price {
        text-align: right;
    }

    .cc-row__controls {
        justify-content: flex-end;
    }

    /*
     * Both of these are said once elsewhere at this width - "Seats" and the unit
     * in the pinned column header - so the per-row copies come out of the
     * layout. They stay in the markup and in the accessibility tree: the clip
     * technique, not display:none, because a crawler reading a price with no
     * unit and a screen reader announcing one are the same problem.
     */
    .cc-seats__label,
    .cc-row__unit {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 1199px) {
    /* Inline rather than in a rail, so it is not a full-width slab of navy. */
    .cc-order__inner {
        max-width: 560px;
    }
}

@media (min-width: 1200px) {
    .cc-intro {
        grid-template-columns: minmax(0, 1fr) var(--cc-rail);
        column-gap: var(--cc-gutter);
        align-items: end;
        padding-bottom: 68px;
    }

    .cc-shop__body {
        grid-template-columns: minmax(0, 1fr) var(--cc-rail);
        column-gap: var(--cc-gutter);
        align-items: start;
    }

    .cc-shelf {
        grid-column: 1;
        grid-row: 1;
    }

    .cc-addons {
        grid-column: 1;
        grid-row: 2;
    }

    .cc-checkout {
        grid-column: 1;
        grid-row: 3;
    }

    .cc-order {
        grid-column: 2;
        grid-row: 1 / span 3;
        height: 100%;
    }

    .cc-order__inner {
        position: sticky;
        top: calc(var(--cc-pinned-top) + 24px);
        max-height: calc(100vh - var(--cc-pinned-top) - 48px);
        overflow-y: auto;
    }

    .cc-bar {
        display: none;
    }
}

/* ------------------------------------------------------------------ print -- */

@media print {
    .cc-shop {
        max-width: none;
    }

    .cc-bar,
    .cc-shop__body .cc-order {
        display: none;
    }

    .cc-receipt__charge {
        background-image: none;
    }

    .cc-receipt__code {
        background: transparent;
        padding-left: 0;
    }
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    .cc-shop *,
    .cc-shop *::before,
    .cc-shop *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cc-shop .cc-pay[aria-busy="true"] {
        background-image: none;
    }
}