/* Configurator steps: one product card, the MDM, software, package and support steps.
   Aesthetic review findings 11, 25, 34, 35, 37 (see docs/aesthetic-fixes.md).
   Loaded after css/configurator.css. The step ids (#step-1 ... #step-7) are in every rule on
   purpose: configurator.css repeats the same selectors in several media blocks, and an id wins
   over all of them without !important. The brand orange stays as it was: buttons keep the orange
   border and fill, and the text on them is the dark ink so it stays readable. */

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

/* ---------------------------------------------------------------------------------------------
   Finding 25 and 11: the shared product card (headsets, MDM options, add-ons)
   --------------------------------------------------------------------------------------------- */
:is(#step-2, #step-5, #step-6) .product-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: left;
    position: relative;
    cursor: default;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:is(#step-2, #step-5, #step-6) .product-card:hover {
    transform: none;
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
:is(#step-2, #step-5, #step-6) .product-card.is-added,
:is(#step-2, #step-5, #step-6) .product-card.selected {
    background: #fffaf3;
    border-color: var(--primary-color, #f89521);
    box-shadow: 0 0 0 1px var(--primary-color, #f89521);
}

/* header row: name on the left, the 'i' (and any tag) on the right, never over the buttons */
:is(#step-2, #step-5, #step-6) .product-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
:is(#step-2, #step-5, #step-6) .product-card-name {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 700;
    color: #191817;
    overflow-wrap: anywhere;
}
:is(#step-2, #step-5, #step-6) .product-card-head .info-badge {
    position: static;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin: 0;
    font-size: 13px;
}
:is(#step-2, #step-5, #step-6) .product-card-badge,
:is(#step-2, #step-5, #step-6) .product-card-head .required-badge {
    position: static;
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #191817;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

:is(#step-2, #step-5, #step-6) .product-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
}
:is(#step-2, #step-5, #step-6) .product-card-media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

:is(#step-2, #step-5, #step-6) .product-card-desc {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}
#step-2 .product-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:is(#step-2, #step-5, #step-6) .product-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.4rem;
}
:is(#step-2, #step-5, #step-6) .product-card-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: #191817;
}
:is(#step-2, #step-5, #step-6) .product-card-unit {
    font-size: 0.85rem;
    color: #475569;
}
:is(#step-2, #step-5, #step-6) .product-card-note {
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
}

/* the action row is pinned to the bottom of the card at one height, so Add and Select line up */
:is(#step-2, #step-5, #step-6) .product-card-action {
    margin-top: auto;
    padding-top: 0.25rem;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}
:is(#step-2, #step-5, #step-6) .product-add-btn,
:is(#step-2, #step-5, #step-6) .product-added-btn {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px solid var(--primary-color, #f89521);
    border-radius: 8px;
    background: #fff;
    color: #191817;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease;
}
:is(#step-2, #step-5, #step-6) .product-add-btn:hover,
:is(#step-2, #step-5, #step-6) .product-added-btn:hover {
    background: #fff1de;
    color: #191817;
}
:is(#step-2, #step-5, #step-6) .product-add-btn:focus-visible,
:is(#step-2, #step-5, #step-6) .product-added-btn:focus-visible,
:is(#step-2, #step-5, #step-6) .product-step-btn:focus-visible {
    outline: 3px solid #191817;
    outline-offset: 2px;
}
:is(#step-2, #step-5, #step-6) .product-add-btn:disabled {
    border-color: #cbd5e1;
    color: #64748b;
    background: #f1f5f9;
    cursor: not-allowed;
}
/* MDM: the chosen option's Select turns into a filled Selected with a tick */
:is(#step-5) .product-add-btn.selected {
    background: var(--primary-color, #f89521);
    color: #191817;
}
:is(#step-5) .product-add-btn.selected::before {
    content: "\2713";
    font-weight: 800;
}

/* Add becomes a stepper once the product is in the order, and goes back at 0 */
:is(#step-2, #step-6) .product-stepper,
:is(#step-2, #step-6) .product-added-btn {
    display: none;
}
:is(#step-2, #step-6) .product-card.is-added .product-add-btn,
#step-2 .product-card:has(input[name="headset"]:checked) .product-add-btn {
    display: none;
}
:is(#step-2, #step-6) .product-card.is-added .product-stepper,
#step-2 .product-card:has(input[name="headset"]:checked) .product-stepper {
    display: flex;
}
#step-6 .product-card.is-added .product-added-btn {
    display: inline-flex;
    background: var(--primary-color, #f89521);
}
:is(#step-2, #step-6) .product-stepper {
    flex: 1 1 auto;
    box-sizing: border-box;
    align-items: stretch;
    height: 48px;
    border: 2px solid var(--primary-color, #f89521);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
:is(#step-2, #step-6) .product-step-btn {
    flex: 0 0 48px;
    width: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #191817;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
:is(#step-2, #step-6) .product-step-btn:hover {
    background: #fff1de;
}
:is(#step-2, #step-6) .product-stepper .product-qty {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #fed7aa;
    border-right: 1px solid #fed7aa;
    border-radius: 0;
    background: #fff;
    color: #191817;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* MDM list under the price */
#step-5 .product-card .tier-features {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0.9rem;
    color: #334155;
}
#step-5 .product-card .tier-features li {
    padding: 0.2rem 0;
}

/* Finding 11: the MDM step is one column below 900px, three from there */
#step-5 .mdm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
    align-items: stretch;
}
@media (min-width: 900px) {
    #step-5 .mdm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Finding 25: headsets and add-ons in a grid of the same cards */
#step-2 .headset-models,
#step-6 .addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-top: 0;
}
#step-6 .addons-grid {
    margin-top: 1.25rem;
}
@media (max-width: 520px) {
    #step-2 .headset-models,
    #step-6 .addons-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* on a phone the picture sits beside the copy and price, under a full-width name row, so a card is not a screen tall */
    #step-2 .headset-brand {
        padding: 0.75rem;
    }
    :is(#step-2, #step-6) .product-card {
        padding: 0.75rem;
    }
    :is(#step-2, #step-6) .product-card.has-media {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "media desc"
            "media price"
            "action action";
        column-gap: 0.75rem;
        row-gap: 0.4rem;
        align-content: start;
    }
    :is(#step-2, #step-6) .product-card.has-media .product-card-head { grid-area: head; }
    :is(#step-2, #step-6) .product-card.has-media .product-card-media { grid-area: media; height: 84px; padding: 0.2rem; align-self: start; }
    :is(#step-2, #step-6) .product-card.has-media .product-card-desc { grid-area: desc; }
    :is(#step-2, #step-6) .product-card.has-media .product-card-price { grid-area: price; align-self: end; }
    :is(#step-2, #step-6) .product-card.has-media .product-card-note { grid-column: 1 / -1; }
    :is(#step-2, #step-6) .product-card.has-media .product-card-action { grid-area: action; margin-top: 0.4rem; }
    #step-2 .product-card-desc {
        -webkit-line-clamp: 3;
    }
}
/* ---------------------------------------------------------------------------------------------
   Finding 35: software step
   --------------------------------------------------------------------------------------------- */
#step-4 .software-categories {
    margin: 0 0 1rem;
    text-align: center;
}
#step-4 .software-filter-label {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #191817;
}
#step-4 .category-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
/* one neutral pill: outlined ink on white; the pressed one is filled ink */
#step-4 .category-legend .category-tag,
#step-4 .category-legend .category-tag:is(.career, .architecture, .design, .skills, .engineering) {
    box-sizing: border-box;
    min-height: 40px;
    padding: 0.4rem 0.95rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #191817;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}
#step-4 .category-legend .category-tag:hover,
#step-4 .category-legend .category-tag:is(.career, .architecture, .design, .skills, .engineering):hover {
    border-color: #64748b;
    background: #f8fafc;
    color: #191817;
}
#step-4 .category-legend .category-tag.active,
#step-4 .category-legend .category-tag:is(.career, .architecture, .design, .skills, .engineering).active {
    background: #191817;
    border-color: #191817;
    color: #fff;
    box-shadow: none;
}
#step-4 .category-legend .category-tag:focus-visible {
    outline: 3px solid var(--primary-color, #f89521);
    outline-offset: 2px;
}

#step-4 .software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
    align-items: stretch;
}
#step-4 .software-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem;
    min-width: 0;
}
#step-4 .software-card.selected {
    background: #fffaf3;
    border-color: var(--primary-color, #f89521);
}
#step-4 .software-header {
    margin: 0;
}
#step-4 .software-card .software-desc {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#step-4 .software-card.desc-open .software-desc {
    display: block;
    overflow: visible;
}
#step-4 .read-more-btn {
    align-self: flex-start;
    margin: 0;
    padding: 0.25rem 0;
    min-height: 32px;
    border: 0;
    background: none;
    color: #191817;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
#step-4 .read-more-btn:focus-visible {
    outline: 3px solid var(--primary-color, #f89521);
    outline-offset: 2px;
}
#step-4 .software-controls {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}
#step-4 .software-include-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
#step-4 .software-include-row .checkbox-label {
    margin: 0;
    font-weight: 600;
    color: #191817;
}
#step-4 .software-include-row .license-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    white-space: nowrap;
}
#step-4 .software-include-row .license-quantity .quantity-input {
    width: 4.5rem;
}
#step-4 .software-extra {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #475569;
}
#step-4 .software-extra .checkbox-label {
    margin: 0;
    font-size: 0.875rem;
}
#step-4 .software-extra .installation-note {
    margin: 0;
    font-size: 0.8rem;
    color: #475569;
}

/* ---------------------------------------------------------------------------------------------
   Finding 34: package step
   --------------------------------------------------------------------------------------------- */
#step-1 .packages-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0.25rem 0 0;
    overflow: visible;
    scroll-snap-type: none;
}
@media (min-width: 768px) {
    #step-1 .packages-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}
#step-1 .package-card-horizontal {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 1.25rem;
    text-align: left;
}
#step-1 .package-card-horizontal .package-header-horizontal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "img img"
        "title info"
        "price price";
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    text-align: left;
}
#step-1 .package-tier-image {
    grid-area: img;
    justify-self: center;
    width: 160px;
    height: 160px;
    margin: 0 0 0.25rem;
}
#step-1 .package-tier-image img,
#step-1 .package-tier-image picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#step-1 .package-card-horizontal .package-header-horizontal h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.3rem;
    color: #191817;
    text-align: left;
}
#step-1 .package-card-horizontal .package-header-horizontal .package-price {
    grid-area: price;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #191817;
    text-align: left;
}
#step-1 .package-card-horizontal .package-info-btn {
    grid-area: info;
    position: static;
    margin: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    font-size: 14px;
}
#step-1 .package-subtitle {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #334155;
}
#step-1 .package-highlights li {
    font-size: 0.97rem;
    line-height: 1.5;
    color: #1f2937;
}
#step-1 .package-card-horizontal .package-select {
    margin-top: auto;
    min-height: 48px;
}
#step-1 .package-card-horizontal .package-content-horizontal {
    margin-bottom: 1rem;
}
#step-1 .package-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* the third call to action is a standard secondary button, not a black one */
#step-1 .custom-build-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.5rem;
    border: 2px solid var(--primary-color, #f89521);
    border-radius: 8px;
    background: #fff;
    color: #191817;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
#step-1 .custom-build-btn:hover {
    background: #fff1de;
}
#step-1 .custom-build-btn:focus-visible {
    outline: 3px solid #191817;
    outline-offset: 2px;
}

/* the package popup: price up top, Select at the bottom, always in view */
#package-info-modal .pkg-info-desc {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #334155;
}
#package-info-modal .pkg-info-pricebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #fffaf3;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}
#package-info-modal .pkg-info-price-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}
#package-info-modal .pkg-info-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #191817;
}
#package-info-modal .package-includes td:last-child,
#package-info-modal .package-includes th:last-child {
    text-align: right;
    white-space: nowrap;
}
#package-info-modal .package-includes td:nth-child(2),
#package-info-modal .package-includes th:nth-child(2) {
    text-align: center;
}
#package-info-modal .package-includes td:last-child {
    color: #475569;
}
#package-info-modal .pkg-info-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0 0;
    padding: 0.75rem 0 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}
#package-info-modal .pkg-info-select {
    min-height: 48px;
    min-width: 200px;
}
@media (max-width: 520px) {
    #package-info-modal .pkg-info-select {
        width: 100%;
    }
}
body.hide-package-prices #package-info-modal .pkg-info-pricebar {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   Finding 37: support step
   --------------------------------------------------------------------------------------------- */
#step-7 .support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
    align-items: stretch;
}
@media (min-width: 640px) {
    #step-7 .support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* an odd last card takes the whole row instead of sitting alone beside an empty space */
    #step-7 .support-grid .package-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1000px) {
    #step-7 .support-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #step-7 .support-grid .package-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}
#step-7 .support-grid .package-card {
    box-sizing: border-box;
    min-height: 0;
    margin: 0;
    padding: 1.25rem;
    overflow: visible;
}
#step-7 .package-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}
#step-7 .package-card-head h3 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.25rem;
    color: #191817;
}
#step-7 .package-card-head .premium-badge,
#step-7 .package-card-head .required-badge {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
/* text on orange is always white (Ethan, 19 Oct 2026) */
#step-7 .package-card-head .premium-badge {
    background: var(--primary-color, #F89521); /* one brand orange, not amber (Ethan, 19 Oct 2026) */
    color: #ffffff;
}
#step-7 .support-grid .package-select {
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 1rem;
    border: 2px solid var(--primary-color, #f89521);
    background: #fff;
    color: #191817;
    font-weight: 700;
}
#step-7 .support-grid .package-select:hover {
    background: #fff1de;
    color: #191817;
}
/* no empty tick box: the words carry the state */
#step-7 .support-grid .package-select .checkmark {
    display: none;
}
#step-7 .support-grid .package-select .select-added {
    display: none;
    align-items: center;
    gap: 0.4rem;
}
#step-7 .support-grid .package-card:has(input[type="checkbox"]:checked) .package-select {
    background: var(--primary-color, #f89521);
    color: #191817;
}
#step-7 .support-grid .package-card:has(input[type="checkbox"]:checked) .package-select .select-add {
    display: none;
}
#step-7 .support-grid .package-card:has(input[type="checkbox"]:checked) .package-select .select-added {
    display: inline-flex;
}
#step-7 .support-grid .package-select:focus-within {
    outline: 3px solid #191817;
    outline-offset: 2px;
}

/* the checkbox stays in the tab order (configurator.css hid it with display:none) */
#step-7 .support-grid .package-select {
    position: relative;
}
#step-7 .support-grid .package-select input[type="checkbox"] {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* software header: name left, the 'i' beside it (it was position:absolute with no card to sit in,
   so every card's 'i' piled up at the bottom left of the page) */
#step-4 .software-card {
    text-align: left;
}
#step-4 .software-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
#step-4 .software-header h4 {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    text-align: left;
    flex-wrap: wrap;
}
#step-4 .software-header .info-badge {
    position: static;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin: 0 0 0 auto;
    font-size: 13px;
}

/* support: the tag sits above the title in the header, so a narrow card never squeezes the two together */
#step-7 .package-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
#step-7 .package-card-head .premium-badge,
#step-7 .package-card-head .required-badge {
    order: -1;
}
#step-7 .support-grid .package-select {
    font-size: 0.95rem;
    text-align: center;
}
#step-1 .custom-build-btn {
    margin-top: 1rem;
}

/* package popup table: three columns (the legacy rules were written for two and fix the last one at 110px) */
#package-info-modal .package-includes table {
    table-layout: auto;
    width: 100%;
}
#package-info-modal .package-includes thead th:nth-child(2),
#package-info-modal .package-includes tbody td:nth-child(2) {
    width: 6rem;
    text-align: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
#package-info-modal .package-includes thead th:last-child,
#package-info-modal .package-includes tbody td:last-child {
    width: 7.5rem;
    text-align: right;
    padding-left: 0.75rem;
    padding-right: 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
}
#package-info-modal .package-includes tbody td:nth-child(2) {
    border-right: 1px solid #e2e8f0;
}
#package-info-modal .package-includes thead th {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
#package-info-modal .package-includes thead th:last-child {
    border-right: 0;
}
@media (max-width: 520px) {
    /* on a phone the table is two columns: the package price is in the bar above, and every line says Included */
    #package-info-modal .package-includes {
        padding: 0;
        background: none;
        margin: 1rem 0 0;
    }
    #package-info-modal .package-includes thead th:last-child,
    #package-info-modal .package-includes tbody td:last-child {
        display: none;
    }
    #package-info-modal .package-includes thead th:nth-child(2),
    #package-info-modal .package-includes tbody td:nth-child(2) {
        width: 4.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-right: 0;
    }
    #package-info-modal .package-includes thead th {
        letter-spacing: 0;
        font-size: 0.72rem;
    }
}
/* the privacy popup: readable links, and room between the list and the closing line */
#contact-info-modal .modal-body {
    padding: 0.5rem 1.25rem 1rem;
    color: #334155;
    line-height: 1.55;
}
#contact-info-modal .modal-body p {
    margin: 0.75rem 0;
}
#contact-info-modal .modal-body ul {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
}
#contact-info-modal .modal-body li {
    margin: 0.35rem 0;
}
#contact-info-modal .modal-body a {
    color: #191817;
    font-weight: 600;
    text-decoration: underline;
}

/* nothing shows under the sticky Select bar: the body has no bottom padding, the bar carries its own */
#package-info-modal .package-info-body {
    padding-bottom: 0;
}
#package-info-modal .pkg-info-actions {
    padding: 0.75rem 0;
    margin-bottom: 0;
}

#package-info-modal .package-includes table {
    display: table; /* configurator.css makes it display:block on narrower screens, so the columns stop short of the edge */
}

/* the shared dialog layout (css/modal-helper.css) sets max-width:100%, so each popup states its own width */
#package-info-modal .modal-content {
    max-width: 780px;
}
#packages-modal .modal-content {
    max-width: 1100px;
}
#storage-space-modal .modal-content {
    max-width: 500px;
}

/* a title logo that is white or blank must not push the name across the card */
#step-4 .software-header h4 .software-logo {
    max-width: 88px;
    height: 24px;
    width: auto;
    object-fit: contain;
}

/* support: one auto margin (the price block), so the price sits right above its button on every card */
#step-7 .support-grid .package-select {
    margin-top: 0;
}
#step-7 .support-grid .package-price {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------------------------
   Product popup (Ethan, 19 Oct 2026): a click on a product's image, name or 'i' opens it in
   #device-info-modal. Big image with the gallery as thumbnails, price, copy, features and the
   card's own control. Flat brand orange with bold white text, as everywhere.
   --------------------------------------------------------------------------------------------- */
.product-card .product-card-media img,
.product-card .product-card-name,
.storage-tile .storage-tile-img img,
.storage-tile .storage-item-name,
.software-card .software-header h4 { cursor: pointer; }

.product-popup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.product-popup.no-media { grid-template-columns: minmax(0, 1fr); }

.product-popup-main {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f8fafc;
    border-radius: 12px;
}
.product-popup-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.product-popup-thumb {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}
.product-popup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-popup-thumb.is-active,
.product-popup-thumb:hover { border-color: var(--primary-color, #F89521); }

.product-popup-price { margin: 0 0 0.75rem; font-size: 1.4rem; font-weight: 700; color: #1f2937; }
.product-popup-text { margin: 0 0 0.75rem; line-height: 1.55; }
.product-popup-features { margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.5; }
.product-popup-features li { margin-bottom: 0.25rem; }

.product-popup-action { display: flex; align-items: center; gap: 0.75rem; }
.product-popup-action .popup-btn {
    min-height: 44px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color, #F89521);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.product-popup-action .popup-btn:hover { background: var(--color-primary-dark, #e26f00); }
.product-popup-action .popup-btn.is-done { background: #1f2937; }
.popup-stepper { display: inline-flex; align-items: center; border: 2px solid var(--primary-color, #F89521); border-radius: 8px; overflow: hidden; }
.popup-stepper .popup-step {
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--primary-color, #F89521);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}
.popup-stepper .popup-qty { min-width: 48px; text-align: center; font-weight: 700; color: #1f2937; }

@media (max-width: 640px) {
    .product-popup { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}