/* cart-lahoda-2 — checkout page. Wrapper / inner split (repo convention).
   2.1: delivery / payment method radio cards, packaging note.
   2.2: company toggle in the billing fieldset.
   2.3: phone-width overflow fix (sidebar / fieldset / textarea min-width).
   2.4: stepper, summary step (blocks + Upraviť), cart-changed notice; the
        armed-button state is gone (the summary step replaced it).
   2.5: cart-changed notice made prominent (red tint, icon, title).
   3.0: requested-date block (Termín objednávky, brief 112), its summary
        block and the thank-you date line. */

.cart-lahoda-2 {
    width: 100%;
    container-type: inline-size;
}

.cart-lahoda-2__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-7) var(--container-gutter);
}

.cart-lahoda-2__heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-6);
}

.cart-lahoda-2__notice {
    font-family: var(--font-body);
    color: var(--brand-red);
}

.cart-lahoda-2__notice a {
    color: var(--ink);
    font-weight: 600;
}

.cart-lahoda-2__notice--inline {
    font-size: 0.8125rem;
    margin: 0 0 var(--space-3);
}

/* ----- Two-column layout: form + sticky order-summary sidebar ---------- */

.cart-lahoda-2__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* `[hidden]`'s UA rule loses to the `display: grid` above (both are single
   author-cascade-relevant selectors of equal specificity, source order
   decides) — an explicit override is required or `.hidden = true` is a
   no-op here. Same reasoning applies to `.cart-lahoda-2__grid` below,
   toggled on the delivery-fields block. */
.cart-lahoda-2__layout[hidden],
.cart-lahoda-2__grid[hidden] {
    display: none;
}

.cart-lahoda-2__sidebar {
    /* Mobile: the shopper should see what they're paying for before they
       start filling in addresses, same reasoning most eshop checkouts use
       for an order-summary accordion — here just placed first, no toggle.
       On the summary step (root data-step="summary") the same order puts
       the items and totals right above the place-order button. */
    order: -1;
    /* A grid item's min-width is `auto` = its min-content: a long product
       name (nowrap) in the summary would otherwise widen the single column
       past a phone screen and push the whole form off the right edge. */
    min-width: 0;
}

@container (min-width: 1080px) {
    .cart-lahoda-2__layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .cart-lahoda-2__sidebar {
        order: 0;
    }

    .cart-lahoda-2__sidebar-inner {
        position: sticky;
        top: var(--space-6);
    }
}

.cart-lahoda-2__main {
    min-width: 0;
}

/* ----- Form ------------------------------------------------------------- */

.cart-lahoda-2__fieldset {
    /* Fieldsets default to min-inline-size: min-content — keep them
       shrinkable like any other block. */
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin: 0 0 var(--space-5);
}

.cart-lahoda-2__fieldset legend {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    padding: 0 var(--space-2);
}

.cart-lahoda-2__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

/* "Nakupujem na firmu" sits inside the billing fieldset, above the grids. */
.cart-lahoda-2__toggle--company {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    margin: 0 0 var(--space-4);
}

.cart-lahoda-2__grid--company {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--border);
}

.cart-lahoda-2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@container (min-width: 480px) {
    .cart-lahoda-2__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.cart-lahoda-2__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.cart-lahoda-2__field input,
.cart-lahoda-2__field select {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, var(--radius));
    transition: border-color var(--transition-fast);
}

.cart-lahoda-2__field-hint {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-muted);
}

.cart-lahoda-2__field input:focus-visible,
.cart-lahoda-2__field select:focus-visible {
    outline: none;
    border-color: var(--brand-gold);
}

.cart-lahoda-2__note-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-5);
}

.cart-lahoda-2__note-label textarea {
    /* A textarea's intrinsic width (cols=20) is wider than a phone column. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, var(--radius));
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.cart-lahoda-2__note-label textarea:focus-visible {
    outline: none;
    border-color: var(--brand-gold);
}

.cart-lahoda-2__error {
    font-family: var(--font-body);
    color: var(--danger);
    background: var(--danger-tint);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
}

.cart-lahoda-2__submit {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--bg-cream);
    background: var(--brand-red);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    width: 100%;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        opacity var(--transition-fast);
}

.cart-lahoda-2__submit:hover:not(:disabled) {
    background: var(--brand-red-dark);
}

.cart-lahoda-2__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cart-lahoda-2__back {
    display: inline-block;
    margin-top: var(--space-5);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink-muted);
    text-decoration: none;
}

.cart-lahoda-2__back:hover {
    color: var(--ink);
}

/* The same quiet link look as a <button> (step 3's "Späť na údaje"). */
.cart-lahoda-2__back--button {
    margin: 0;
    padding: var(--space-2) 0;
    border: none;
    background: none;
    cursor: pointer;
    align-self: center;
}

/* ----- Stepper: Košík → Údaje a doručenie → Súhrn a potvrdenie ---------- */

.cart-lahoda-2__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    margin: calc(-1 * var(--space-3)) 0 var(--space-6);
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.cart-lahoda-2__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-lahoda-2__step-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.cart-lahoda-2__step-link:hover .cart-lahoda-2__step-label,
.cart-lahoda-2__step-link:focus-visible .cart-lahoda-2__step-label {
    color: var(--ink);
    text-decoration: underline;
}

.cart-lahoda-2__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    background: var(--bg-cream);
}

.cart-lahoda-2__step--done .cart-lahoda-2__step-number {
    border-color: var(--brand-gold);
    background: var(--brand-gold-tint);
    color: var(--brand-gold-dark);
}

.cart-lahoda-2__step--current {
    color: var(--ink);
    font-weight: 600;
}

.cart-lahoda-2__step--current .cart-lahoda-2__step-number {
    border-color: var(--brand-red);
    background: var(--brand-red);
    color: var(--bg-cream);
}

/* ----- Step views ------------------------------------------------------- */

.cart-lahoda-2__step-view[hidden] {
    display: none;
}

/* The final check found the server cart (lines, addresses or methods)
   changed since the summary was built — another tab, most likely: the form
   comes back with this notice. Deliberately loud (owner 2026-10-29): the
   brand's pink tint, a red frame and an exclamation icon, so the shopper
   sees at once why the order did not go out. */
.cart-lahoda-2__cart-changed {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--brand-red-tint);
    border: 2px solid var(--brand-red);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-5);
    line-height: 1.5;
    box-shadow: var(--shadow-md);
}

.cart-lahoda-2__cart-changed[hidden] {
    display: none;
}

.cart-lahoda-2__cart-changed:focus-visible {
    outline: 2px solid var(--brand-red-dark);
    outline-offset: 3px;
}

.cart-lahoda-2__cart-changed-icon {
    flex-shrink: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--brand-red);
    margin-top: 2px;
}

.cart-lahoda-2__cart-changed-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.cart-lahoda-2__cart-changed-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--brand-red-dark);
}

.cart-lahoda-2__cart-changed-text {
    font-size: 0.9375rem;
}

/* ----- Step 3: summary blocks ------------------------------------------- */

.cart-lahoda-2__summary-heading {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    font-size: 1.5rem;
    margin: 0 0 var(--space-2);
}

.cart-lahoda-2__summary-intro {
    font-family: var(--font-body);
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0 0 var(--space-5);
}

.cart-lahoda-2__summary-blocks {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
}

@container (min-width: 640px) {
    .cart-lahoda-2__summary-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cart-lahoda-2__summary-block {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
}

.cart-lahoda-2__summary-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}

.cart-lahoda-2__summary-block-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--ink);
    margin: 0;
}

.cart-lahoda-2__summary-edit {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-gold-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cart-lahoda-2__summary-edit:hover,
.cart-lahoda-2__summary-edit:focus-visible {
    color: var(--brand-red-dark);
}

.cart-lahoda-2__summary-block-body {
    margin: 0;
    color: var(--ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cart-lahoda-2__summary-block-hint {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.cart-lahoda-2__summary-block-hint a {
    color: var(--ink);
}

.cart-lahoda-2__summary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ----- Sidebar: order summary -------------------------------------------- */

.cart-lahoda-2__sidebar-inner {
    background: var(--bg-cream-deep);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.cart-lahoda-2__sidebar-heading {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0 0 var(--space-4);
}

.cart-lahoda-2__items {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cart-lahoda-2__item {
    display: flex;
    /* A narrow summary (phones) wraps the price block under the line instead
       of squeezing the info column — with configured parameters (the cake)
       the squeezed column broke the values one letter per row. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.cart-lahoda-2__item-img,
.cart-lahoda-2__item-img-link {
    flex-shrink: 0;
}

.cart-lahoda-2__item-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm, var(--radius));
    display: block;
    box-shadow: var(--shadow-sm);
}

.cart-lahoda-2__item-img--empty {
    background: var(--border);
}

.cart-lahoda-2__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 11rem;
    min-width: 0;
}

.cart-lahoda-2__item-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.cart-lahoda-2__item-name:hover {
    text-decoration: underline;
}

.cart-lahoda-2__item-qty {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.cart-lahoda-2__item-warning {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-red);
}

.cart-lahoda-2__item-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cart-lahoda-2-badge-color, var(--ink));
    border: 1px solid var(--cart-lahoda-2-badge-color, var(--border));
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
}

.cart-lahoda-2__item-badge-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.cart-lahoda-2__item-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.cart-lahoda-2__item-price {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
    white-space: nowrap;
}

.cart-lahoda-2__item-price-exvat {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.cart-lahoda-2__totals-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

/* Our company is no VAT payer (ERP VAT kinds): only "Spolu". */
.cart-lahoda-2[data-vat-payer="no"] .cart-lahoda-2__totals-row--vat {
    display: none;
}

.cart-lahoda-2__totals {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--ink);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
    margin-bottom: var(--space-4);
}

/* ----- Delivery / payment method choices (radio cards) ------------------- */

.cart-lahoda-2__choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-lahoda-2__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, var(--radius));
    background: var(--bg-cream);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.cart-lahoda-2__choice:hover {
    border-color: var(--brand-gold);
}

.cart-lahoda-2__choice:has(input:checked) {
    border-color: var(--brand-gold);
    background: var(--bg-cream-deep);
}

.cart-lahoda-2__choice:has(input:focus-visible) {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

.cart-lahoda-2__choice input {
    flex-shrink: 0;
    margin: 3px 0 0;
    accent-color: var(--brand-red);
}

.cart-lahoda-2__choice-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cart-lahoda-2__choice-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}

.cart-lahoda-2__choice-hint {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.cart-lahoda-2__choice-hint a {
    color: var(--ink);
}

/* ----- Requested date (Termín objednávky, brief 112) ------------------- */

/* The choices / field / hint / message are flex or styled blocks — `[hidden]`
   needs the explicit override (see the layout note at the top). */
.cart-lahoda-2__date-choices[hidden],
.cart-lahoda-2__date-field[hidden],
.cart-lahoda-2__date-hint[hidden],
.cart-lahoda-2__date-error[hidden] {
    display: none;
}

.cart-lahoda-2__date-choices + .cart-lahoda-2__date-field {
    margin-top: var(--space-4);
}

.cart-lahoda-2__date-field input[type="date"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-cream);
    accent-color: var(--brand-red);
}

.cart-lahoda-2__date-field input[type="date"]:user-invalid {
    border-color: var(--danger);
}

@container (min-width: 480px) {
    .cart-lahoda-2__date-field {
        max-width: 16rem;
    }
}

.cart-lahoda-2__choice:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.cart-lahoda-2__choice:has(input:disabled):hover {
    border-color: var(--border);
}

.cart-lahoda-2__date-hint {
    margin: var(--space-3) 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.cart-lahoda-2__date-error {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-tint);
    border-radius: var(--radius-sm);
}

/* Editor preview only — where the methods will appear and where they come from. */
.cart-lahoda-2__choices-empty {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

/* ----- Packaging note under the totals ----------------------------------- */

/* "Cena dohodou" — a gold-tint info note (DESIGN_MANUAL badges: tint bg, ink text). */
.cart-lahoda-2__price-on-request-note,
.cart-lahoda-2__thankyou-price-note {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--brand-gold-tint);
    border-radius: var(--radius-sm);
}

.cart-lahoda-2__thankyou-price-note {
    max-width: 520px;
    margin: var(--space-3) auto var(--space-5);
    font-size: 0.9375rem;
}

/* Configured parameters (composedConfig.summary, e.g. the cake) — one
   flowing line, a step smaller than the name: "Typ torty: Narodeninová ·
   Počet poschodí: 2 · Motív torty: …". The <dl> keeps its semantics; the
   pairs just run inline and wrap like text. */
.cart-lahoda-2__item-details {
    display: block;
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.cart-lahoda-2__item-details dt,
.cart-lahoda-2__item-details dd {
    display: inline;
    margin: 0;
}

.cart-lahoda-2__item-details dt {
    font-weight: 400;
}

.cart-lahoda-2__item-details dt::after {
    content: ": ";
}

.cart-lahoda-2__item-details dd {
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.cart-lahoda-2__item-details dd:not(:last-child)::after {
    content: " · ";
    font-weight: 400;
    color: var(--ink-muted);
}

.cart-lahoda-2__packaging-note {
    margin: calc(-1 * var(--space-2)) 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* ----- Consent checkboxes ------------------------------------------------ */

.cart-lahoda-2__consents {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.cart-lahoda-2__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    cursor: pointer;
}

.cart-lahoda-2__consent input {
    flex-shrink: 0;
    margin-top: 3px;
}

.cart-lahoda-2__consent a {
    color: var(--ink);
}

/* ----- Inline thank-you view --------------------------------------------- */

.cart-lahoda-2__thankyou {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-8) 0;
    text-align: center;
}

.cart-lahoda-2__thankyou i {
    font-size: 2.5rem;
    color: var(--brand-gold);
    margin-bottom: var(--space-4);
}

.cart-lahoda-2__thankyou-heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-3);
}

.cart-lahoda-2__thankyou-order-number {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--space-6);
}

.cart-lahoda-2__thankyou-date[hidden] {
    display: none;
}

.cart-lahoda-2__thankyou-date {
    font-family: var(--font-body);
    color: var(--ink);
    margin: calc(-1 * var(--space-4)) 0 var(--space-6);
}

.cart-lahoda-2__thankyou-back {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    color: #fff;
    background: var(--brand-red);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.cart-lahoda-2__thankyou-back:hover {
    background: var(--brand-red-dark);
}