.content-header { grid-template-columns: auto 1fr auto; }
.shop-page { max-width: 1180px; padding: 44px 24px 80px; margin: auto; }
.shop-page h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; }
.shop-page h2 { font-size: 21px; line-height: 1.3; margin: 0 0 16px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; margin-top: 28px; }
.shop-muted { color: #abc0c5; font-size: 14px; }
.shop-packages { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.shop-package { position: relative; display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 6px 16px; border: 1px solid var(--line); border-radius: 6px; background: #122127; padding: 20px 16px; cursor: pointer; min-height: 148px; }
.shop-package:has(input:checked) { border-color: #77dbd3; background: #173035; box-shadow: inset 0 0 0 1px #77dbd3; }
.shop-package:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.shop-package img { grid-row: 1 / 3; object-fit: contain; }
.shop-package strong { font-size: 18px; overflow-wrap: anywhere; }
.shop-package > span { color: #f1d58c; font-size: 21px; }
.shop-package input { position: absolute; right: 10px; top: 10px; accent-color: #8dded5; }
.shop-checkout { border-left: 1px solid var(--line); padding-left: 28px; }
.shop-checkout label:not(.shop-confirm) { display: grid; gap: 5px; margin-bottom: 14px; font-size: 14px; }
.shop-checkout input:not([type=checkbox]) { width: 100%; background: #101b20; color: var(--paper); padding: 9px 10px; border: 1px solid #52666a; border-radius: 4px; }
.shop-checkout button,.shop-command { display: inline-block; border: 1px solid #80d4d2; border-radius: 4px; background: #80d4d2; color: #092225; padding: 10px 16px; cursor: pointer; font: 700 14px/1.4 Inter,system-ui,sans-serif; }
.shop-checkout button:disabled { opacity: .45; cursor: default; }
.shop-checkout .shop-link { padding: 4px 0; border: 0; background: transparent; color: #91ddd7; text-decoration: underline; }
#shop-login > a { display: block; margin: 14px 0; color: #91ddd7; }
#recipient-name { font-size: 20px; overflow-wrap: anywhere; }
.shop-confirm { display: flex; align-items: start; gap: 10px; font-size: 14px; margin: 24px 0 18px; }
.shop-confirm input { margin-top: 5px; accent-color: #8dded5; flex-shrink: 0; }
#pay { width: 100%; }
#shop-status { min-height: 48px; font-size: 14px; }
#order-id { display: block; overflow-wrap: anywhere; font-size: 12px; margin: 12px 0; }
#resume-payment { margin: 8px 0; }
.loyalty-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.loyalty-section > p { font-size: 14px; }
.loyalty-meter { overflow: hidden; height: 20px; border: 1px solid #51626b; border-radius: 4px; background: #080f16; margin-top: 24px; padding: 3px; }
.loyalty-fill { height: 100%; width: 0; background: linear-gradient(90deg,#298896,#8cd8c7,#f1d58c); transition: width 1.2s ease; }
.loyalty-milestones { display: flex; justify-content: space-between; font-size: 11px; margin-top: 7px; color: #c9d2cd; }
.loyalty-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.loyalty-totals dt { font-size: 12px; color: #abc0c5; }
.loyalty-totals dd { font-size: 24px; margin: 4px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }
@media(max-width:950px) { .shop-layout { grid-template-columns:minmax(0,1fr); } .shop-checkout { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; max-width:520px; } }
@media(max-width:540px) { .shop-page { padding:28px 16px 60px; } .shop-page h1 { font-size:28px; } .shop-packages { gap:10px; } .shop-package { grid-template-columns:minmax(0,1fr); text-align:center; padding:20px 8px 12px; } .shop-package img { grid-row:auto; margin:auto; width:90px; height:90px; } .shop-package strong { font-size:15px; } .shop-package > span { font-size:18px; } .loyalty-totals { gap:10px; } }
@media(prefers-reduced-motion:reduce) { .loyalty-fill { transition:none; } }