/* GREVT shop - checkout.css: bag, checkout (information, payment), thank-you and account pages.
   Load AFTER shop.css on those pages only. Tokens, header, footer, buttons, forms live in shop.css. */
/* ---------- 12. Bag ---------- */
.bag { padding-top: 13px; padding-bottom: 12px; }
.bag__layout { display: grid; grid-template-columns: 827px 374px; column-gap: 15px; margin-right: -6px; }
.bag__head { grid-column: 1; }
.bag__head .page-title { margin-top: 17px; }
.bag__continue { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 14px 10px 0 0; display: inline-flex; align-items: center; gap: 10px;
  font: 600 9.6px/1 var(--f-sans); color: var(--c-ink); }
.bag__continue span { text-decoration: underline; text-underline-offset: 2px; }
.bag__continue .icon { width: 13px; height: 13px; }
.bag-table { grid-column: 1; margin-top: 15px; background: #fff; border: 1px solid #f1f1f1; }
.bag-table__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 114px 146px 124px 48px; align-items: center; min-height: 95px; padding: 0 0 0 20px; }
.bag-table__row + .bag-table__row { border-top: 1px solid #f0f0f0; }
.bag-table__row--head { min-height: 42px; font: 500 9.4px/1 var(--f-sans); color: #2a2a2a; }
.bag-table__all { display: flex; align-items: center; gap: 22px; grid-column: 1 / span 2; font: 500 10.4px/1 var(--f-sans); color: #2a2a2a; }
.bag-table__c { text-align: center; }
.bag-item { display: flex; align-items: center; gap: 17px; }
.bag-item__img { flex: none; width: 84px; height: 76px; object-fit: cover; background: var(--c-photo); }
.bag-item__name { font: 700 12px/1.2 var(--f-sans); color: var(--c-ink); }
.bag-item__meta { margin-top: 5px; font: 500 10.4px/1.2 var(--f-sans); color: #8b8b8b; }
.bag-item__meta span + span::before { content: '|'; margin: 0 8px; color: #b5b5b5; }
.bag-item .in-stock { display: block; margin-top: 7px; font-size: 10px; }
.bag-item__del { justify-self: center; width: 22px; height: 22px; display: grid; place-items: center; color: #222; }
.bag-item__del .icon { width: 17px; height: 17px; }
.bag__actions { grid-column: 1; display: flex; gap: 18px; margin-top: 16px; }
.bag__actions .btn:first-child { min-width: 186px; }
.summary { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 54px; padding: 19px 19px 22px 16px; background: #fafafa; border: 1px solid #ebebeb; border-radius: 2px; }
.summary__title { font: 600 18.6px/1 var(--f-serif); letter-spacing: -.011em; color: var(--c-ink); text-transform: uppercase; }
.summary__title small { margin-left: 4px; font: 400 12px/1 var(--f-sans); color: #444; text-transform: none; }
.summary__rows { margin-top: 22px; padding: 0 6px 0 7px; }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; font: 500 11.8px/1 var(--f-sans); color: #2b2b2b; }
.summary__row + .summary__row { margin-top: 15px; }
.summary__row b { font-weight: 700; color: var(--c-ink); font-size: 13.2px; }
.summary__total { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 12px; padding: 11px 6px 0 7px; border-top: 1px solid #ececec; }
.summary__total-label { font: 700 17.4px/1 var(--f-sans); color: var(--c-ink); }
.summary__total-label small { display: block; margin-top: 8px; font: 400 11.2px/1 var(--f-sans); color: #7a7a7a; }
.summary__total-value { font: 700 24.9px/1 var(--f-sans); letter-spacing: -.02em; color: var(--c-ink); }
.promo { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; margin-top: 19px; padding: 12px 6px 9px 11px; background: var(--c-green-bg); border-radius: 3px; }
.promo__icon { width: 21px; height: 21px; color: #26543a; grid-row: 1 / span 2; }
.promo__label { font: 600 10.8px/1 var(--f-sans); color: #1f2a22; }
.promo__form { display: flex; gap: 7px; margin-top: 7px; margin-left: -3px; }
.promo__input { flex: 1; min-width: 0; height: 28px; padding: 0 9px; background: #fff; border: 1px solid #e1e8e3; border-radius: 2px; font: 500 9.4px/1 var(--f-sans); }
.promo__input::placeholder { color: #a3a3a3; }
.promo__btn { height: 33px; margin-top: -3px; padding: 0 18px; min-width: 73px; font-size: 9.6px; }
.summary__cta { margin-top: 13px; height: 42px; font-size: 13.4px; letter-spacing: .01em; gap: 14px; }
.summary__cta .icon { width: 16px; height: 16px; }
.trust { display: grid; grid-template-columns: 176px 1fr; row-gap: 19px; margin-top: 17px; padding: 0 6px 0 7px; }
.trust__item { display: flex; align-items: center; gap: 12px; }
.trust__icon { width: 30px; height: 30px; color: #1b1b1b; }
.trust__title { font: 600 10.4px/1 var(--f-sans); color: var(--c-ink); }
.trust__text { margin-top: 4px; font: 500 9.6px/1 var(--f-sans); color: #8a8a8a; }

/* ---------- 15. Checkout: stepper, payment methods, checkout summary ---------- */
.checkout { padding-top: 13px; padding-bottom: 40px; }
.checkout__top { position: relative; height: 97px; }
.checkout__top .page-title { position: absolute; left: 0; top: 17px; font-size: 38.5px; letter-spacing: .008em; }
.checkout__top .page-sub { position: absolute; left: 0; top: 61px; margin: 0; }
.steps { position: absolute; left: 350px; top: 9px; display: grid; grid-template-columns: repeat(3, 98px); column-gap: 99px; }
.steps__item { position: relative; display: flex; flex-direction: column; align-items: center; font: 500 10px/1 var(--f-sans); color: #4a4a4a; }
.steps__item + .steps__item::before { content: ''; position: absolute; right: calc(50% + 17px); top: 13px; width: 160px; height: 1px; background: #2a2a2a; }
.steps__dot { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--c-black); color: #fff; font: 700 12px/1 var(--f-sans); }
.steps__dot .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.steps__item.is-current .steps__dot { width: 31px; height: 31px; margin-top: -2px; font-size: 14px; }
.steps__item.is-current { font-weight: 700; color: var(--c-ink); }
.steps__item.is-todo .steps__dot { background: #fff; color: #8a8a8a; border: 1px solid #cfcfcf; }
.steps__label { margin-top: 12px; }
.steps__item.is-current .steps__label { margin-top: 10px; }
.checkout__grid { display: grid; grid-template-columns: 761px 411px; column-gap: 26px; align-items: start; margin-left: 6px; }
.pay-list { display: grid; gap: 0; }
.pay-method { background: #fff; border: 1px solid #f1f1f1; border-radius: 2px; }
.pay-method__head { display: flex; align-items: center; min-height: 50px; padding: 0 23px 0 23px; cursor: pointer; }
.radio { appearance: none; -webkit-appearance: none; flex: none; width: 21px; height: 21px; margin: 0 30px 0 0; border: 1.5px solid #6d6d6d; border-radius: 50%; background: #fff; cursor: pointer; }
.radio:checked { border: 2px solid #1d5bd6; background: radial-gradient(circle, #1d5bd6 0 4.5px, #fff 5px); box-shadow: 0 0 0 2px rgba(29, 91, 214, .15); }
.pay-method__name { font: 500 13.6px/1.2 var(--f-sans); color: var(--c-ink); }
.pay-method__name small { display: block; margin-top: 6px; font: 500 10.4px/1 var(--f-sans); color: #9a9a9a; }
.pay-method__name--upi { font: 700 15px/1 var(--f-serif); letter-spacing: .02em; }
.pay-method__name--upi small { display: inline; margin: 0 0 0 9px; font: 500 12px/1 var(--f-sans); color: #3a3a3a; letter-spacing: 0; }
.pay-method__icon { width: 26px; height: 26px; margin-right: 16px; color: #1b1b1b; }
.pay-method__marks { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.pay-method--wallet .pay-method__marks { gap: 22px; }
.pay-method__marks svg { height: 17px; width: auto; }
.pay-method__marks .b-round { height: 23px; }
.pay-method__note { display: flex; align-items: center; gap: 14px; margin-left: auto; font: 500 8.8px/1 var(--f-sans); color: #8a8a8a; }
.pay-method__note .icon { width: 27px; height: 27px; color: #2b3f8c; }
.pay-method__chev { width: 14px; height: 14px; margin-left: 22px; color: #555; }
.pay-method--upi .pay-method__head { min-height: 57px; }
.upi-panel { display: grid; grid-template-columns: 383px 1px 1fr; margin: 0 13px 16px 14px; padding: 20px 0 22px; border: 1px solid #ededed; border-radius: 2px; background: #fff; }
.upi-panel__qr { display: flex; flex-direction: column; align-items: center; width: 151px; margin-left: 149px; }
.upi-panel__title { font: 500 13.6px/1 var(--f-sans); color: #2b2b2b; }
.upi-panel__code { position: relative; width: 151px; height: 151px; margin-top: 9px; }
.upi-panel__code img { width: 100%; height: 100%; image-rendering: pixelated; }
.upi-panel__code svg.upi-mark { position: absolute; left: 50%; top: 50%; width: 52px; height: 26px; margin: -13px 0 0 -26px; padding: 4px 6px; background: #fff; }
.upi-panel__sep { background: #ececec; margin: 22px 0 6px; }
.upi-panel__how { padding: 34px 0 0 67px; }
.upi-panel__how h3 { font: 700 13.2px/1 var(--f-sans); color: var(--c-ink); }
.upi-panel__how ol { margin-top: 12px; list-style: none; counter-reset: s; }
.upi-panel__how li { counter-increment: s; font: 400 12.4px/22px var(--f-sans); color: #6a6a6a; }
.upi-panel__how li::before { content: counter(s) '.'; display: inline-block; width: 17px; }
.upi-wait { display: grid; grid-template-columns: 22px 1fr; column-gap: 11px; align-items: center; margin-top: 15px; }
.upi-wait__spin { width: 19px; height: 19px; border: 1.6px solid #2b2b2b; border-right-color: transparent; border-radius: 50%; animation: spin 1.1s linear infinite; grid-row: 1 / span 2; }
.upi-wait__text { font: 500 10.4px/1 var(--f-sans); color: #6a6a6a; }
.upi-wait__timer { margin-top: 5px; font: 500 9.4px/1 var(--f-sans); color: #9a9a9a; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .upi-wait__spin { animation: none; }
}
.summary--checkout { grid-column: auto; grid-row: auto; margin-top: -21px; padding: 13px 18px 20px 15px; background: #fff; border-color: #f0f0f0; }
.summary__head { display: flex; align-items: baseline; justify-content: space-between; padding-left: 0; }
.summary--checkout .summary__title { font-size: 15.4px; letter-spacing: 0; }
.summary__edit { display: inline-flex; align-items: center; gap: 7px; font: 500 10.4px/1 var(--f-sans); color: var(--c-ink); }
.summary__edit span { text-decoration: underline; text-underline-offset: 2px; }
.summary__edit .icon { width: 12px; height: 12px; }
.mini-items { margin-top: 5px; }
.mini-item { display: grid; grid-template-columns: 63px 1fr auto; column-gap: 34px; align-items: start; padding: 6px 0 8px 0; }
.mini-item + .mini-item { border-top: 1px solid #f1f1f1; padding-top: 11px; }
.mini-item__img { width: 63px; height: 62px; object-fit: cover; background: var(--c-photo); }
.mini-item__name { margin-top: 14px; font: 700 10.4px/1 var(--f-sans); color: var(--c-ink); }
.mini-item__meta { margin-top: 8px; font: 500 9.4px/1 var(--f-sans); color: #9a9a9a; }
.mini-item__meta span + span::before { content: '|'; margin: 0 9px; color: #c4c4c4; }
.mini-item__qty { margin-top: 7px; font: 500 9.4px/1 var(--f-sans); color: #9a9a9a; }
.mini-item__price { margin-top: 13px; text-align: right; font: 700 12.4px/1 var(--f-sans); color: var(--c-ink); }
.mini-item__price small { display: block; margin-top: 6px; font: 500 9.4px/1 var(--f-sans); color: #9a9a9a; }
.summary--checkout .summary__rows { margin-top: 9px; padding: 13px 3px 0 3px; border-top: 1px solid #f1f1f1; }
.summary--checkout .summary__row { font-size: 10.6px; color: #6a6a6a; }
.summary--checkout .summary__row b { font-size: 11.4px; }
.summary--checkout .summary__row + .summary__row { margin-top: 12px; }
.promo--grey { margin-top: 15px; padding: 10px 8px 10px 10px; background: #f7f7f7; grid-template-columns: 27px 1fr; column-gap: 6px; }
.promo--grey .promo__label { font-size: 9px; }
.promo--grey .promo__form { margin: 6px 0 0 0; }
.promo--grey .promo__icon { width: 22px; height: 22px; color: #222; align-self: center; }
.promo--grey .promo__input { height: 25px; font-size: 9px; }
.promo--grey .promo__btn { height: 30px; margin-top: -2px; min-width: 74px; font-size: 9.6px; }
.summary--checkout .summary__total { margin-top: 0; padding: 9px 3px 0 3px; border-top: 0; }
.summary__total-label--serif { font: 700 18px/1 var(--f-serif); }
.summary__total-label--serif small { font-family: var(--f-sans); font-weight: 400; font-size: 9.6px; margin-top: 4px; color: #8a8a8a; }
.summary--checkout .summary__total-value { font-size: 22px; }
.summary__pay { margin-top: 20px; height: 42px; font-size: 12.4px; letter-spacing: .02em; gap: 0; border-radius: 2px; }
.summary__pay .icon:first-child { width: 17px; height: 17px; margin-right: 38px; }
.summary__pay .icon:last-child { width: 17px; height: 17px; margin-left: 13px; }
.summary__terms { margin-top: 14px; font: 500 9.2px/1.2 var(--f-sans); color: #4a4a4a; }
.summary__terms a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.trust-row { display: grid; grid-template-columns: 87px 99px 90px 1fr; margin-top: 22px; }
.trust-row li { display: flex; align-items: center; gap: 6px; padding-left: 6px; font: 500 8.4px/1.3 var(--f-sans); color: #4a4a4a; }
.trust-row li:first-child { padding-left: 0; }
.trust-row li + li { border-left: 1px solid #ececec; }
.trust-row .icon { width: 24px; height: 24px; color: #1b1b1b; }
.trust-row small { display: block; color: #a0a0a0; font-size: 7.4px; }
.pay-list { min-width: 0; margin: 0; padding: 0; border: 0; }
.pay-method--card { margin-top: 3px; }
.pay-method--nb { margin-top: 9px; }
.pay-method--wallet { margin-top: 12px; }
.pay-method--cod { margin-top: 14px; }
.pay-method--card .pay-method__head { min-height: 48px; }
.pay-method--wallet .pay-method__head { min-height: 71px; }
.pay-method--cod .pay-method__head { min-height: 68px; }
.pay-method--cod .pay-method__chev { margin-left: auto; }
.mark { width: auto; flex: none; }
.mark--gpay { height: 19px; }
.mark--phonepe { height: 23px; }
.mark--paytm { height: 13px; }
.mark--bhim { height: 13px; }
.mark--upi { height: 13px; }
.mark--visa { height: 15px; }
.mark--mastercard { height: 18px; }
.mark--rupay { height: 13px; }
.mark--amex { height: 18px; }
.mark--amazonpay { height: 16px; }
.mark--mobikwik { height: 20px; }

/* ---------- 16. Thank-you page ---------- */
.ty-hero { position: relative; height: 448px; background: var(--c-page); overflow: hidden; }
.ty-hero__inner { position: relative; max-width: var(--page-max); height: 100%; margin: 0 auto; }
.ty-hero__media { position: absolute; left: 0; top: 0; width: 432px; height: 100%; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, #000 84%, transparent 100%); }
.ty-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.ty-hero__script { position: absolute; left: 16px; top: 374px; transform: rotate(-17deg); transform-origin: 0 0; font: 400 24.5px/27px var(--f-script); color: #eadfcb; white-space: nowrap; }
.ty-hero__script span { display: block; }
.ty-hero__script span:nth-child(2) { margin-left: 14px; }
.ty-hero__script span:nth-child(3) { margin-left: 30px; }
.ty-hero__script::after { content: ''; position: absolute; left: 150px; top: 30px; width: 58px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 6'%3E%3Cpath d='M1 5C20 3.5 40 2 61 1' fill='none' stroke='%23eadfcb' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.ty-main { position: absolute; left: 440px; top: 12px; width: 451px; text-align: center; }
.ty-main__badge { width: 51px; height: 51px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--c-green); color: #fff; }
.ty-main__badge .icon { width: 27px; height: 27px; stroke-width: 2; }
.ty-main__title { margin-top: 10px; font: 600 35.6px/32px var(--f-serif); letter-spacing: .028em; color: var(--c-ink); text-transform: uppercase; }
.ty-main__title span { display: block; font-size: 33.6px; letter-spacing: .005em; }
.ty-main__lead { margin-top: 11px; font: 400 14px/1 var(--f-sans); color: #2b2b2b; }
.ty-main__email { margin-top: 9px; font: 400 12.2px/1 var(--f-sans); color: #555; }
.ty-main__email b { font-weight: 700; color: var(--c-ink); }
.order-card { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; padding: 16px 0 15px; background: var(--c-green-bg); text-align: left; }
.order-card > div { padding: 0 20px; }
.order-card > div + div { border-left: 1px solid #d4e6d8; text-align: center; }
.order-card__label { display: flex; align-items: center; gap: 8px; font: 500 10.8px/1 var(--f-sans); color: #3a3a3a; }
.order-card > div + div .order-card__label { justify-content: center; }
.order-card__label button { color: #3a3a3a; }
.order-card__label .icon { width: 12px; height: 12px; }
.order-card__value { margin-top: 10px; font: 700 10.4px/1.2 var(--f-sans); color: var(--c-ink); }
.order-card__value--lg { font-size: 17px; letter-spacing: .01em; }
.order-card__paid { display: inline-flex; align-items: center; gap: 8px; }
.order-card__paid::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c-green); }
.timeline { position: relative; display: grid; grid-template-columns: 72px 162px 110px 146px; margin-top: 13px; width: 490px; }
.timeline__step { position: relative; display: flex; flex-direction: column; align-items: center; }
.timeline__step + .timeline__step::before { content: ''; position: absolute; top: 13px; right: calc(50% + 14px); width: 89px; height: 1.5px; background: #2b2b2b; }
.timeline__step:nth-child(3)::before { width: 108px; }
.timeline__step:nth-child(4)::before { width: 100px; background: #cfcfcf; }
.timeline__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-black); color: #fff; }
.timeline__dot .icon { width: 13px; height: 13px; }
.timeline__step.is-todo .timeline__dot { background: #fff; color: #2b2b2b; border: 1.3px solid #9a9a9a; }
.timeline__label { margin-top: 7px; font: 700 10px/1 var(--f-sans); color: var(--c-ink); white-space: nowrap; }
.timeline__text { margin-top: 7px; max-width: 120px; font: 400 8.6px/11px var(--f-sans); color: #8d8d8d; }
.ty-main__actions { display: grid; grid-template-columns: 212px 228px; column-gap: 9px; margin: 35px 0 0 4px; }
.ty-main__actions .btn { height: 39px; font-size: 11.4px; letter-spacing: .01em; border-radius: 2px; }
.ty-main__actions .btn .icon { width: 15px; height: 15px; }
.ty-main__actions .btn--outline { border-color: #555; }
.summary--ty { position: absolute; left: 911px; top: 28px; width: 348px; margin: 0; padding: 14px 16px 18px 15px; background: #fff; border-color: #efefef; }
.summary--ty .summary__title { font-size: 13.4px; }
.summary--ty .summary__title small { font-size: 11px; }
.summary--ty .summary__title { padding-left: 6px; }
.summary--ty .mini-items { margin-top: 6px; }
.summary--ty .mini-item { grid-template-columns: 53px 1fr auto; column-gap: 34px; padding: 5px 0 8px 3px; }
.summary--ty .mini-item + .mini-item { padding-top: 7px; }
.summary--ty .mini-item__img { width: 53px; height: 58px; }
.summary--ty .mini-item__name { margin-top: 10px; font-size: 9.6px; }
.summary--ty .mini-item__meta { margin-top: 7px; font-size: 8.2px; }
.summary--ty .mini-item__meta span + span::before { margin: 0 7px; }
.summary--ty .mini-item__price { margin-top: 12px; font-size: 12px; }
.summary--ty .mini-item__price small { font-size: 8.4px; }
.summary--ty .summary__rows { margin-top: 12px; padding: 14px 0 0; border-top: 1px solid #f1f1f1; }
.summary--ty .summary__row { font-size: 10px; color: #6a6a6a; }
.summary--ty .summary__row b { font-size: 11px; }
.summary--ty .summary__row + .summary__row { margin-top: 13px; }
.summary--ty .summary__total { margin-top: 10px; padding: 0; }
.summary--ty .summary__total-value { font-size: 23px; }
.info-strip { background: #fff; border-bottom: 3px solid #f6f6f6; }
.info-strip__list { display: grid; grid-template-columns: 212px 250px 245px 276px 1fr; max-width: var(--page-max); height: 85px; margin: 0 auto; align-items: center; padding-left: 35px; }
.info-strip__item { display: flex; align-items: flex-start; gap: 18px; height: 50px; padding-top: 5px; }
.info-strip__item + .info-strip__item { border-left: 1px solid #ececec; padding-left: 46px; }
.info-strip__item:nth-child(3) { padding-left: 40px; }
.info-strip__item:nth-child(4) { padding-left: 58px; }
.info-strip__item .icon { width: 29px; height: 29px; margin-top: 4px; color: #1b1b1b; }
.info-strip__title { font: 700 10px/1 var(--f-sans); color: var(--c-ink); }
.info-strip__text { margin-top: 5px; max-width: 150px; font: 400 8.6px/12px var(--f-sans); color: #8d8d8d; }
.info-strip__updates { display: block; padding-left: 69px !important; }
.info-strip__links { display: flex; gap: 25px; margin-top: 12px; }
.info-strip__links a { display: inline-flex; align-items: center; gap: 10px; font: 500 9.6px/1 var(--f-sans); color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.info-strip__links .icon { width: 21px; height: 21px; margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 22. Account: sign in / create account card with tabs */
.auth { padding-top: 13px; padding-bottom: 56px; }
.auth__card { max-width: 440px; margin: 24px auto 0; border-color: #ebebeb; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #ececec; }
.auth-tabs__tab { height: 48px; font: 700 10.4px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; }
.auth-tabs__tab[aria-selected='true'] { color: var(--c-ink); box-shadow: inset 0 -2px var(--c-black); }
.auth__panel { padding: 30px 40px; }
.auth__panel .page-title { font-size: 30px; }
.auth__panel .page-title, .auth__panel .page-sub, .auth__note { text-align: center; }
.auth__form, .auth__more { display: grid; gap: 16px; margin-top: 18px; }
.auth__form { margin-top: 24px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth__link { font-size: 11px; }
.auth__btn, .co-actions .btn { height: 42px; gap: 12px; border-radius: 2px; font-size: 11.4px; }
.auth__btn .icon, .co-actions .btn .icon { width: 15px; height: 15px; }
.auth__or { display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: #ececec; }
.auth__note { font-size: 11px; color: #6a6a6a; }
.auth__note a, .auth__note button { display: inline-flex; align-items: center; gap: 6px; margin-left: 3px; font-weight: 600; }
.auth__note .icon { width: 12px; height: 12px; }
.auth__perks { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 10px; background: #fafafa; border-top: 1px solid #f1f1f1; }
.auth__perk { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; text-align: center; }
.auth__perk + .auth__perk { border-left: 1px solid #ececec; }
.auth__perk .icon { width: 22px; height: 22px; }

/* 23. Checkout information: cards, saved addresses, shipping options */
.steps__item.is-todo::before { background: #d4d4d4; }
.co-main { display: grid; gap: 14px; min-width: 0; }
.co-card { padding: 20px 24px 24px; }
.co-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.co-card__head .summary__title { font-size: 15.4px; letter-spacing: 0; }
.co-card__aside { font-size: 10.4px; color: #6a6a6a; }
.co-card__aside a { font-weight: 600; }
.addr-cards, .ship-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.addr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.addr-card, .ship-opt { display: flex; cursor: pointer; }
.addr-card:hover, .ship-opt:hover { border-color: #9a9a9a; }
.addr-card:has(:checked), .ship-opt:has(:checked) { border-color: var(--c-black); box-shadow: inset 0 0 0 .5px var(--c-black); }
.addr-card .radio, .ship-opt .radio { width: 18px; height: 18px; margin: 0 12px 0 0; }
.addr-card { align-items: flex-start; padding: 14px 12px; }
.addr-card__name { display: flex; align-items: center; gap: 8px; font: 700 11px/18px var(--f-sans); color: var(--c-ink); }
.addr-card__name .badge { height: 13px; padding: 0 5px; font-size: 7.4px; line-height: 13px; }
.addr-card__text { display: block; margin-top: 4px; font-size: 10.4px; line-height: 1.5; color: #6a6a6a; }
.addr-card--new { align-items: center; border-style: dashed; font-weight: 600; font-size: 11px; color: var(--c-ink); }
.addr-card--new .icon { width: 14px; height: 14px; margin-right: 7px; }
.ship-opt { align-items: center; min-height: 64px; padding: 0 18px 0 16px; }
.ship-opt .pay-method__name { flex: 1; }
.ship-opt .price-lg { font-size: 12.4px; }
.co-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.co-actions .btn { min-width: 290px; font-size: 12.4px; letter-spacing: .02em; }
.co-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 10.4px; color: var(--c-ink); }
.co-back .icon { width: 13px; height: 13px; }
@media (max-width: 1024px) {
  .addr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .form-grid, .form-grid--3, .addr-cards, .ship-opts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .auth__panel { padding: 24px 18px 26px; }
  .auth__panel .page-title { font-size: 26px; }
  .co-card { padding: 18px 16px 20px; }
  .co-card__head { flex-wrap: wrap; row-gap: 8px; }
  .co-actions { flex-direction: column-reverse; align-items: stretch; }
  .co-actions .btn { min-width: 0; }
  .co-back { justify-content: center; padding: 6px 0; }
}

/* =====================================================================
   24. Responsive. Desktop above is exact at 1280. Wider screens scale the
   whole 1280 design (zoom steps); 1025-1279 compresses; tablet <= 1024,
   mobile <= 767 re-flow with readable type sizes.
   ===================================================================== */
.upi-panel__app { display: none; }
@media (max-width: 1279px) {
  .bag__layout { grid-template-columns: minmax(0, 1fr) 360px; margin-right: 0; }
  .checkout__grid { grid-template-columns: minmax(0, 1fr) 380px; margin-left: 0; }
  .ty-hero__inner { display: grid; grid-template-columns: 27% minmax(0, 1fr) 330px; column-gap: 20px; padding-right: 16px; }
  .ty-hero__media { position: relative; grid-column: 1; grid-row: 1; width: auto; height: 448px; }
  .ty-main { position: relative; left: auto; top: auto; width: auto; margin-top: 12px; grid-column: 2; grid-row: 1; }
  .timeline { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .timeline__step + .timeline__step::before, .timeline__step:nth-child(n)::before { width: calc(100% - 28px); }
  .ty-main__actions { grid-template-columns: 1fr 1fr; margin-left: 0; }
  .order-card > div { padding: 0 12px; }
  .order-card__value { white-space: nowrap; }
  .order-card__value--lg { font-size: 15px; }
  .summary--ty { position: relative; left: auto; top: 28px; width: auto; grid-column: 3; grid-row: 1; align-self: start; }
}
@media (max-width: 1024px) {
  .bag__layout { grid-template-columns: minmax(0, 1fr); }
  .bag__continue { display: none; }
  .summary { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .summary__title { font-size: 20px; }
  .summary__row { font-size: 13px; }
  .summary__row b { font-size: 14px; }
  .promo__label, .promo__btn, .promo__input { font-size: 12px; }
  .trust__title { font-size: 12px; }
  .trust__text { font-size: 11px; }
  .checkout__top { height: auto; display: flex; flex-direction: column; }
  .checkout__top .page-title, .checkout__top .page-sub { position: static; }
  .checkout__top .page-title { margin-top: 18px; }
  .steps { position: static; order: 3; grid-template-columns: repeat(3, 1fr); column-gap: 0; margin: 26px 0 22px; }
  .steps__item + .steps__item::before { width: calc(100% - 34px); }
  .checkout__grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .summary--checkout { margin-top: 0; }
  .pay-method__name { font-size: 14px; }
  .pay-method__name small, .pay-method__note { font-size: 12px; }
  .mini-item__name { font-size: 13px; }
  .mini-item__meta, .mini-item__qty, .summary__terms, .trust-row li { font-size: 11.5px; }
  .ty-hero { height: auto; }
  .ty-hero__inner { display: block; padding: 0; }
  .ty-hero__media { position: relative; width: 100%; height: 300px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .ty-hero__media img { object-position: 30% 30%; }
  .ty-hero__script { top: 196px; }
  .ty-main { width: auto; max-width: 560px; margin: -36px auto 0; padding: 0 var(--gutter); }
  .ty-main__lead { font-size: 15px; }
  .ty-main__email { font-size: 13px; line-height: 1.4; }
  .order-card__label, .order-card__value { font-size: 12px; }
  .timeline { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .timeline__step + .timeline__step::before, .timeline__step:nth-child(n)::before { width: calc(100% - 28px); }
  .timeline__label { font-size: 12px; }
  .timeline__text { font-size: 11px; line-height: 14px; }
  .ty-main__actions { grid-template-columns: 1fr 1fr; margin: 28px 0 0; }
  .ty-main__actions .btn { height: 46px; font-size: 12px; }
  .summary--ty { position: static; width: auto; max-width: 560px; margin: 32px auto 32px; }
  .summary--ty .summary__title { padding-left: 0; }
  .info-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding: 8px var(--gutter); }
  .info-strip__item, .info-strip__item:nth-child(n) { height: auto; padding: 14px 0 !important; border: 0; }
  .info-strip__updates { grid-column: 1 / -1; }
  .info-strip__title { font-size: 12px; }
  .info-strip__text, .info-strip__links a { font-size: 11.5px; line-height: 1.4; }
}
@media (max-width: 767px) {
  .bag-table { border: 0; background: transparent; }
  .bag-table__row--head { min-height: 48px; padding: 0 12px; background: #fff; border: 1px solid #f1f1f1; }
  .bag-table__row--head { grid-template-columns: 1fr; }
  .bag-table__row--head > :not(.bag-table__all) { display: none; }
  .bag-table__all { grid-column: 1; }
  .pay-method--nb .pay-method__chev { margin-left: auto; }
  .bag-table__row:not(.bag-table__row--head) { position: relative; grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 12px; margin-top: 10px; padding: 14px 12px; background: #fff; border: 1px solid #f1f1f1 !important; }
  .bag-table__row > .price-lg:not([data-line-total]) { display: none; }
  .bag-item__check { align-self: start; margin-top: 4px; }
  .bag-item { grid-column: 2 / -1; padding-right: 28px; gap: 12px; }
  .bag-item__img { width: 76px; height: 70px; }
  .bag-item__name { font-size: 14px; }
  .bag-item__meta { font-size: 12px; }
  .bag-item .in-stock { font-size: 12px; }
  .bag-table__row .bag-table__c { text-align: left; }
  .bag-table__row > .bag-table__c[role='cell']:has(.qty) { grid-column: 2; padding-left: 88px; }
  .bag-table__row [data-line-total] { grid-column: 3; align-self: center; font-size: 15px; }
  .bag-item__del { position: absolute; top: 10px; right: 8px; }
  .bag__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bag__actions .btn, .bag__actions .btn:first-child { min-width: 0; height: 44px; padding: 0 8px; font-size: 11px; }
  .summary { padding: 18px 16px; }
  .trust { grid-template-columns: 1fr 1fr; }
  .pay-method__head { padding: 12px 14px; min-height: 56px; flex-wrap: wrap; row-gap: 8px; }
  .radio { margin-right: 14px; }
  .pay-method__name--upi small { display: block; margin: 6px 0 0; }
  .pay-method__marks { gap: 10px; }
  .pay-method__marks .mark { height: 12px; }
  .pay-method__marks .mark--phonepe, .pay-method__marks .mark--mastercard, .pay-method__marks .mark--amex { height: 16px; }
  .pay-method__note { display: none; }
  .upi-panel { grid-template-columns: 1fr; margin: 0 10px 12px; }
  .upi-panel__qr { width: auto; margin: 0; }
  .upi-panel__sep { display: none; }
  .upi-panel__how { padding: 22px 18px 0; }
  .upi-panel__app { display: flex; margin-top: 16px; height: 46px; font-size: 12px; }
  .trust-row { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .trust-row li + li { border-left: 0; }
  .ty-hero__media { height: 260px; }
  .ty-main__title { font-size: 30px; line-height: 30px; }
  .ty-main__title span { font-size: 28px; }
  .order-card { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .order-card > div:last-child { grid-column: 1 / -1; border: 0; border-top: 1px solid #d4e6d8; padding-top: 14px; }
  .timeline__text { display: none; }
  .ty-main__actions { grid-template-columns: 1fr; row-gap: 10px; }
  .info-strip__list { grid-template-columns: 1fr; }
}