.shop-main { padding-top: 140px; padding-bottom: 90px; position: relative; z-index: 2; }
.shop-header { max-width: 850px; margin-bottom: 60px; }
.shop-header .section-title { margin: 18px 0; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.shop-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.shop-toolbar h2, .shop-summary h2 { font-size: 20px; }
.shop-link { color: var(--cyan); text-decoration: underline; font-size: 13px; }
.shop-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#shop-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#shop-products .shop-part { min-width: 0; padding: 16px; overflow-wrap: anywhere; }
.shop-part, .shop-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg-2); }
.shop-part { display: flex; flex-direction: column; gap: 12px; }
.shop-part h3 { font-size: 20px; }
.shop-part p { color: var(--muted); }
.shop-part .shop-price { color: var(--ink); font-size: 23px; margin-top: auto; }
.shop-controls { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.shop-controls label { display: grid; gap: 6px; font-size: 13px; }
.shop-main input { border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 12px; border-radius: 8px; font: inherit; }
.shop-controls input { width: 85px; }
.shop-summary { position: sticky; top: 100px; display: grid; gap: 16px; }
.shop-summary input { width: 100%; }
.shop-summary .shop-total { font-size: 36px; color: var(--cyan); }
.shop-note, #shop-count { font-size: 13px; color: var(--muted); }
#shop-message { overflow-wrap: anywhere; font-size: 14px; }
#shop-message[data-error="true"] { color: #ffb4a8; }
.shop-main button:disabled { opacity: .45; cursor: default; }
.shop-account { position: static; max-width: 560px; margin: 28px 0; }
.shop-account-form { display: grid; gap: 14px; }
.shop-account select { padding: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.shop-main [hidden] { display: none; }
#shop-robot { margin-bottom: 24px; }
#order-history { margin: 24px 0; }
#order-history h3 { overflow-wrap: anywhere; }
#account-message { margin-top: 24px; }
.shop-main :focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 1100px) { #shop-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } .shop-summary { position: static; } }
@media (max-width: 540px) { #shop-products { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .shop-products { grid-template-columns: 1fr; } .shop-toolbar { align-items: start; } .shop-main { padding-top: 110px; } }
.shop-controls { flex-wrap: wrap; justify-content: flex-start; } .shop-add, .shop-trash { min-height: 46px; } .shop-add { padding: 10px 18px; } .shop-trash { display: inline-flex; align-items: center; justify-content: center; width: 46px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); } .shop-trash:hover { color: #ffb4a8; border-color: currentColor; }
.shop-catalog-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } #shop-categories { display: flex; flex-wrap: wrap; gap: 6px; } .shop-category { padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; color: var(--muted); } .shop-category:hover, .shop-category[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); background: rgba(79,195,232,.08); } .shop-category-heading { grid-column: 1 / -1; font-size: 18px; margin-top: 12px; } .shop-part h4 { font-size: 20px; } .shop-toolbar { flex-wrap: wrap; }