/* Product and accessory selection in the bottom order panel. */
html body .order-panel,
html body .order-size-picker,
html body .order-toast { color: var(--brand-ink); font-family: inherit; box-sizing: border-box; }
html body .order-panel *, html body .order-size-picker *, html body .order-toast * { box-sizing: border-box; }
html body .order-line { display: grid; grid-template-columns: 100px minmax(0, 1fr) 44px; align-content: start; gap: 14px 18px; padding: 20px; border: 1px solid var(--brand-mist); border-radius: 20px; background: var(--shop-block-light-text); min-width: 0; transition: border-color 180ms; }
html body .order-line.is-selected { border-color: var(--brand-accent); }
.order-line__image { display: block; width: 100px; height: 100px; border-radius: 13px; object-fit: cover; background: var(--brand-bg); }
.order-line__details { min-width: 0; align-self: center; }
.order-line__heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 8px; }
html body .order-line h3 { min-width: 0; margin: 0; font-size: 20px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.order-line__meta { font-size: 15px; line-height: 1.6; }
.order-line__meta--size-picker { grid-column: 1 / -1; }
.order-line__size { position: relative; display: flex; width: 100%; min-width: 0; min-height: 64px; padding: 10px 34px 10px 12px; border: 1px solid var(--brand-lavender); border-radius: 10px; background: var(--shop-block-light-text); color: var(--brand-navy); }
.order-line__size-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.order-line__size-value > span:first-child { min-width: 0; }
.order-line__size-prices { display: flex; flex-shrink: 0; flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
.order-line__size-prices del { color: color-mix(in srgb, var(--brand-ink) 65%, transparent); font-size: 1em; font-weight: 400; }
.order-line__size-prices strong { color: var(--brand-accent); font-size: 17px; font-weight: 750; }
html body .order-line__size-select { margin: 0; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.order-line__size > svg { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); pointer-events: none; }
.order-line__size-select:disabled { opacity: .55; cursor: default; }
.order-line__discount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.order-line__discount-badge { display: inline-flex; flex-shrink: 0; align-items: center; padding: 4px 7px; border-radius: 6px; background: var(--brand-discount-red); color: var(--shop-block-light-text); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.order-line__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; font-size: 15px; line-height: 1.6; }
.order-line__price--discounted { margin-top: 5px; gap: 2px 8px; }
.order-line__price > span:first-child, .order-line__price strong { white-space: nowrap; }
.order-line__price strong { white-space: normal; max-width: 100%; overflow-wrap: anywhere; color: var(--brand-accent); font-weight: 750; }
.order-line__price del { color: color-mix(in srgb, var(--brand-ink) 65%, transparent); font-size: 13px; }
.order-line__saving { margin: 0; color: var(--brand-discount-red); font-size: 13px; font-weight: 600; line-height: 1.5; }
.order-line__note { font-size: 14px; margin: 6px 0 0; }
html body .order-line__select { position: relative; grid-column: 3; grid-row: 1; display: grid; place-items: center; align-self: center; width: 44px; height: 44px; cursor: pointer; border-radius: 50%; }
.order-line__select input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.order-line__select:has(input:disabled) { opacity: .55; cursor: default; }
.order-line__check { display: block; width: 40px; height: 40px; border: 2px solid var(--brand-lavender); border-radius: 50%; background: var(--shop-block-light-text); }
.order-line__select:has(input:checked) .order-line__check { border: 11px solid var(--brand-ink); }
.order-line__select:has(input:focus-visible) { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.order-line__controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--brand-mist); }
.order-line__quantity { display: flex; max-width: 100%; }
html body .order-line__remove, html body .order-selection__retry, html body .order-toast__view { min-height: 44px; padding: 8px 0; color: var(--brand-accent); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; cursor: pointer; }
html body .order-line__remove { margin-left: auto; color: var(--shop-block-black); }
.order-selection__notice { font-size: 14px; line-height: 1.5; margin: 0 0 14px; padding: 12px; border-radius: 10px; background: var(--brand-mist); }
html body.has-order-selection { padding-bottom: var(--order-bar-space, 120px); }
html body .order-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: min(85dvh, calc(var(--order-viewport, 100dvh) * .85)); margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 1px solid var(--brand-lavender); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--shop-block-light-text); box-shadow: 0 -6px 40px color-mix(in srgb, var(--brand-ink) 12%, transparent); z-index: 45; overflow: hidden; }
html body .order-panel[open] { display: flex; flex-direction: column; }
html body .order-panel.is-expanded { height: min(760px, 85dvh, calc(var(--order-viewport, 100dvh) * .85)); bottom: var(--order-keyboard, 0px); }
.order-panel.is-dragging { user-select: none; }
.order-panel::backdrop { background: color-mix(in srgb, var(--brand-ink) 32%, transparent); backdrop-filter: blur(2px); }
.order-panel__topbar { --order-header-top: 24px; --order-header-bottom: 17px; --order-header-side: 24px; --order-header-gap: 16px; --order-header-arrow: 40px; position: relative; flex: 0 0 auto; }
html body .order-panel__header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--order-header-arrow); align-items: center; gap: 8px var(--order-header-gap); width: 100%; padding: var(--order-header-top) var(--order-header-side) var(--order-header-bottom); border: 0; text-align: left; color: var(--brand-ink); background: var(--shop-block-light-text); cursor: pointer; touch-action: none; user-select: none; }
html body .order-panel__topbar:has(.order-panel__phone) .order-panel__header { grid-template-columns: minmax(0, 1fr) 44px var(--order-header-arrow); }
.order-panel__topbar:has(.order-panel__phone) .order-panel__heading { min-height: 44px; }
html body .order-panel__phone { position: absolute; top: var(--order-header-top); bottom: var(--order-header-bottom); right: calc(var(--order-header-side) + var(--order-header-arrow) + var(--order-header-gap)); display: grid; place-items: center; width: 44px; height: 44px; margin-block: auto; border-radius: 50%; background: var(--brand-success-bg); color: var(--brand-success); text-decoration: none; touch-action: manipulation; }
.order-panel__phone svg { display: block; animation: order-phone-ring 3s ease-in-out infinite; transform-origin: center; }
@keyframes order-phone-ring {
    0%, 20%, 100% { transform: rotate(0); }
    4%, 12% { transform: rotate(-14deg); }
    8%, 16% { transform: rotate(14deg); }
}
.order-panel__handle { position: absolute; top: 8px; left: calc(50% - 21px); width: 42px; height: 4px; border-radius: 10px; background: var(--brand-lavender); }
.order-panel__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.order-panel__heading > strong { font-size: 23px; line-height: 1.2; }
.order-panel__brief { min-width: 0; display: flex; flex-direction: column; text-align: right; gap: 3px; }
.order-panel__brief > span { font-size: 11px; }
.order-panel__brief > strong { font-size: 20px; line-height: 1.25; color: var(--brand-accent); overflow-wrap: anywhere; }
.order-panel__arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-mist); color: var(--brand-navy); grid-column: 3; }
.order-panel__arrow svg { display: block; width: 20px; height: 20px; }
.order-panel.is-expanded .order-panel__arrow svg { transform: rotate(180deg); }
.order-panel__body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.order-panel__list { flex: 1 1 auto; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 56px; scrollbar-width: thin; }
html body .order-panel__additional-title { margin: 0; padding: calc(38px + var(--order-additional-offset, 0px)) 0 2px; border-top: 1px solid var(--brand-mist); color: color-mix(in srgb, var(--brand-lavender) 85%, var(--brand-navy)); font-size: 18px; font-weight: 700; line-height: 1.3; }
html body .order-panel__additional-title + .order-line--summary { border-top: 0; padding-top: 14px; }
html body .order-line--summary { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; border-width: 1px 0 0; border-radius: 0; padding: 20px 0; background: var(--shop-block-light-text); border-color: var(--brand-mist); }
html body .order-line--summary.order-line--accessory { grid-template-columns: 76px minmax(0, 1fr) 44px; }
html body .order-line--summary.is-selected { background: var(--shop-block-light-text); border-color: var(--brand-mist); }
.order-line--summary .order-line__image { width: 76px; height: 76px; }
html body .order-line--summary h3 { font-size: 17px; }
.order-line--summary .order-line__controls { grid-column: 1 / -1; border: 0; padding: 0; }
.order-panel__footer { position: relative; z-index: 1; flex: 0 0 auto; padding: 15px 24px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--brand-mist); background: var(--shop-block-light-text); }
.order-panel__footer::before { content: ""; position: absolute; right: 0; bottom: calc(100% + 1px); left: 0; height: 56px; background: linear-gradient(to bottom, color-mix(in srgb, var(--shop-block-light-text) 0%, transparent), var(--shop-block-light-text)); pointer-events: none; }
.order-panel__saving { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.6; }
.order-panel__saving--discount { color: var(--brand-discount-red); }
.order-panel__saving strong { color: inherit; }
.order-panel__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 18px; font-weight: 700; margin-top: 7px; }
.order-panel__total strong { color: var(--brand-accent); font-size: 27px; line-height: 1.3; }
html body .order-panel__submit { min-height: 54px; width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 12px 16px; background: var(--brand-green); color: var(--shop-block-light-text); font-size: 17px; font-weight: 700; line-height: 1.4; cursor: pointer; }
html body .order-panel__submit:disabled { opacity: .65; cursor: default; }
.order-panel__cart-link { display: block; text-align: center; padding: 12px; min-height: 44px; color: var(--brand-accent); text-decoration: underline; }
.order-panel__empty { margin: 12px 0; font-size: 15px; line-height: 1.5; }
html body .order-size-picker { position: fixed; inset: 0; width: min(620px, calc(100% - 64px)); max-width: none; max-height: min(760px, calc(100dvh - 64px)); margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--brand-bg); overflow: hidden; box-shadow: 0 12px 50px color-mix(in srgb, var(--brand-ink) 18%, transparent); }
html body .order-size-picker[open] { display: flex; flex-direction: column; }
.order-size-picker::backdrop { background: color-mix(in srgb, var(--brand-ink) 32%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.order-size-picker__header { flex: 0 0 auto; display: grid; gap: 16px; padding: 24px; border-bottom: 1px solid var(--brand-mist); }
.order-size-picker__heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
html body .order-size-picker__heading h2 { min-width: 0; margin: 0; font-size: 24px; font-weight: 650; line-height: 1.2; }
html body .order-size-picker__offer { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; font-size: 15px; color: var(--shop-block-light-text); filter: none; }
.order-size-picker__offer .discount-badge__discount, .order-size-picker__offer .discount-badge__saving { min-height: 44px; justify-content: center; }
.order-size-picker__offer .discount-badge__discount { padding: 8px 18px 8px 10px; }
.order-size-picker__offer .discount-badge__saving { padding: 8px 10px 8px 18px; }
html body .order-size-picker__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--brand-navy) 12%, transparent); border-radius: 50%; background: var(--brand-bg); color: var(--brand-ink); cursor: pointer; touch-action: manipulation; }
.order-size-picker__options { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html body .order-size-picker__option { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; width: 100%; min-width: 0; min-height: 88px; margin: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--brand-navy) 12%, transparent); border-radius: 12px; background: var(--brand-bg); color: var(--brand-ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
html body .order-size-picker__option[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand-accent) 28%, transparent); background: color-mix(in srgb, var(--brand-mist) 70%, var(--brand-bg)); }
.order-size-picker__label { min-width: 0; font-size: 18px; font-weight: 500; line-height: 1.2; }
.order-size-picker__details { display: grid; min-width: 0; gap: 7px; }
.order-size-picker__gift { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--brand-accent); font-size: 12px; font-weight: 500; line-height: 1.35; }
.order-size-picker__gift svg { flex: 0 0 18px; }
.order-size-picker__prices { display: grid; justify-items: end; gap: 5px; white-space: nowrap; line-height: 1.2; }
.order-size-picker__prices strong { color: var(--brand-accent); font-size: 18px; font-weight: 750; }
.order-size-picker__prices del { color: color-mix(in srgb, var(--brand-ink) 65%, transparent); font-size: 13px; }
.order-size-picker__radio { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); border-radius: 50%; background: var(--brand-bg); }
.order-size-picker__option[aria-pressed="true"] .order-size-picker__radio { border-color: var(--brand-accent); background: var(--brand-accent); color: var(--shop-block-light-text); }
.order-size-picker__option:disabled { opacity: .55; cursor: default; }
html body .order-toast { position: fixed; right: max(24px, calc((100% - 1200px) / 2)); bottom: calc(var(--order-bar-space, 120px) + 10px); width: min(365px, 90%); padding: 17px 18px 8px; border: 1px solid var(--brand-lavender); border-left: 4px solid var(--brand-accent); border-radius: 15px; background: var(--shop-block-light-text); box-shadow: 0 8px 30px color-mix(in srgb, var(--brand-ink) 15%, transparent); display: flex; flex-direction: column; gap: 9px; z-index: 46; font-size: 13px; pointer-events: none; }
.order-toast__title { padding-right: 28px; font-size: 16px; }
.order-toast b, .order-toast__total strong { color: var(--brand-accent); }
.order-toast__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; border-top: 1px solid var(--brand-mist); padding-top: 9px; }
.order-toast__total strong { font-size: 18px; }
html body .order-toast__close { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; background: transparent; color: var(--brand-ink); border: 0; font-size: 25px; cursor: pointer; pointer-events: auto; }
html body .order-toast__view { align-self: start; pointer-events: auto; }
.order-announcement { position: fixed; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.order-panel button:focus-visible, .order-panel a:focus-visible, .order-size-picker button:focus-visible, .order-toast button:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -3px; }
/* Keep the full summary bar unframed; keyboard focus remains on its toggle icon. */
html body .order-panel__header:focus { outline: none; }
.order-panel__header:focus-visible .order-panel__arrow { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
@media (max-width: 1024px) {
    html body .order-size-picker { inset: auto 0 0; width: 90%; max-height: calc(100dvh - 52px); margin: 0 auto; border-radius: 18px 18px 0 0; }
}
@media (max-width: 640px) {
    html body .order-line { grid-template-columns: 76px minmax(0, 1fr) 44px; gap: 9px 12px; padding: 13px; border-radius: 16px; }
    .order-line__image { width: 76px; height: 82px; border-radius: 10px; }
    html body .order-line h3 { font-size: 18px; }
    .order-line__meta { font-size: 14px; }
    .order-line__price { grid-column: 1 / -1; font-size: 14px; gap: 0 5px; }
    .order-line__check { width: 30px; height: 30px; }
    .order-line__select:has(input:checked) .order-line__check { border-width: 8px; }
    .order-line__controls { padding-top: 10px; }
    html body .order-panel { border-radius: 20px 20px 0 0; }
    .order-panel__topbar { --order-header-top: 23px; --order-header-bottom: 14px; --order-header-side: 15px; --order-header-gap: 8px; --order-header-arrow: 28px; }
    .order-panel__heading { gap: 6px; }
    .order-panel__heading > strong { font-size: 19px; }
    .order-panel__brief > strong { font-size: 18px; }
    .order-panel__arrow { width: 28px; height: 28px; }
    .order-panel__list { padding-inline: 15px; }
    html body .order-line--summary { grid-template-columns: 62px minmax(0, 1fr); padding: 14px 0; border-radius: 0; }
    html body .order-line--summary.order-line--accessory { grid-template-columns: 62px minmax(0, 1fr) 44px; }
    html body .order-line--summary h3 { font-size: 16px; }
    .order-line--summary .order-line__image { width: 62px; height: 68px; }
    .order-panel__footer { padding: 12px 15px max(15px, env(safe-area-inset-bottom)); }
    .order-panel__total { font-size: 16px; }
    .order-panel__total strong { font-size: 24px; }
    html body .order-panel__submit { font-size: 15px; }
    html body .order-toast { width: 90%; right: 5%; }
    html body .order-size-picker { width: 95%; margin-inline: auto; }
    .order-size-picker__header { gap: 12px; padding: 20px 16px 14px; }
    html body .order-size-picker__heading h2 { font-size: 21px; }
    .order-size-picker__options { padding: 12px 12px max(16px, env(safe-area-inset-bottom)); }
    html body .order-size-picker__option { min-height: 82px; padding: 12px 14px; gap: 12px; }
}
@media (max-width: 380px) {
    .order-line__size-value { gap: 6px; font-size: 12px; }
    .order-line__size-prices { gap: 6px; }
    .order-line__size-prices strong { font-size: 14px; }
    html body .order-size-picker__option { grid-template-columns: minmax(0, 1fr) auto 24px; padding-inline: 12px; gap: 10px; }
    .order-size-picker__label, .order-size-picker__prices strong { font-size: 16px; }
    .order-size-picker__radio { width: 24px; height: 24px; }
    html body .order-size-picker__offer { font-size: 13px; }
}
@media (max-height: 500px) {
    .order-panel__saving { font-size: 10px; line-height: 1.2; }
    .order-panel__topbar { --order-header-top: 17px; --order-header-bottom: 8px; }
    .order-panel__footer { padding-block: 8px; }
    .order-panel__total { margin-top: 0; }
}
@media (hover: hover) {
    html body .order-size-picker__option:not(:disabled):hover, html body .order-size-picker__close:hover { border-color: var(--brand-lavender); background: var(--brand-mist); }
    html body .order-panel__phone:hover { background: var(--brand-success); color: var(--shop-block-light-text); }
}
@media (prefers-reduced-motion: reduce) {
    html body .order-line { transition: none; }
    .order-panel__phone svg { animation: none; }
}