.shop-intro { padding: var(--content-gap) 0 0; }
.shop-intro h1 { font: 500 32px/1.3 var(--serif); color: #403448; letter-spacing: -.6px; }
.shop-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 34px; align-items: start; padding-block: 35px 50px; }
.shop-sidebar { position: sticky; top: 24px; }
.shop-sidebar h2 { font: 500 17px/1.5 var(--serif); padding: 0 10px 17px; color: #403448; }
.shop-categories { display: flex; flex-direction: column; gap: 4px; border-block: 1px solid var(--line); padding-block: 12px; }
.shop-categories button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 13px 12px; font-size: 12px; line-height: 1.55; text-align: start; border-radius: 3px; border-inline-start: 2px solid transparent; transition: background .2s,color .2s; }
.shop-category-count { font-size: 10px; color: #847384; font-variant-numeric: tabular-nums; }
.shop-categories button:hover { background: #f9f5f7; color: var(--accent); }
.shop-categories button[aria-pressed="true"] { color: var(--accent); background: #f5eaf0; border-inline-start-color: var(--accent); font-weight: 500; }
.shop-categories button[aria-pressed="true"] .shop-category-count { color: var(--accent); }
.shop-currency-note { padding: 18px 12px; font-size: 11px; line-height: 1.8; color: #8b7c8c; }
.shop-main { min-width: 0; }
.shop-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; padding: 20px; background: #f7f5f8; border: 1px solid #e9e3eb; border-radius: 4px; }
.shop-toolbar label, .shop-sort { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 11px; color: #736077; }
.shop-search>span { position: relative; }
.shop-search svg { position: absolute; width: 17px; height: 17px; top: 14px; inset-inline-start: 13px; color: #9b8899; pointer-events: none; }
.shop-search input, .shop-quantity select { width: 100%; border: 1px solid #dcd3df; border-radius: 3px; background: #fff; color: #403448; font: inherit; font-size: 12px; min-height: 44px; padding: 10px 12px; }
.shop-search input { padding-inline-start: 39px; }
.shop-search input::placeholder { color: #938494; }
.shop-search input:focus-visible, .shop-quantity select:focus-visible { outline: 2px solid #a87587; outline-offset: 2px; }
.shop-results { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; padding-block: 26px 18px; }
.shop-results h2 { font: 500 21px/1.5 var(--serif); color: #403448; }
#shop-count { font-size: 11px; color: #85728a; }
#shop-reset { margin-inline-start: auto; font-size: 11px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.shop-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.shop-card { display: flex; flex-direction: column; padding: 20px 18px 17px; min-width: 0; border: 1px solid #e6dfe9; border-radius: 5px; background: linear-gradient(140deg,#faf7fa,#fff 40%); box-shadow: 0 4px 15px #40324804; transition: border-color .2s,box-shadow .2s; }
.shop-card:hover { border-color: #c2a2b3; box-shadow: 0 6px 22px #4930480b; }
.shop-card-top { display: flex; gap: 14px; align-items: center; margin-bottom: 19px; }
.shop-item-icon { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; background: radial-gradient(ellipse at 50% 40%,#fff 20%,#f1e7ec 90%); border: 1px solid #e8dbe3; border-radius: 12px; box-shadow: inset 0 0 0 3px #fff8; }
.shop-item-icon img { object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px #49304820); }
.shop-kind { color: #8a7187; font-size: 10px; line-height: 1.7; }
.shop-card h3 { font: 500 15px/1.6 var(--serif); color: #49384b; overflow-wrap: anywhere; }
.shop-description { margin: 10px 0 21px; color: #7c6f7f; font-size: 12px; line-height: 1.85; }
.shop-quantity { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 11px; color: #78677b; }
.shop-quantity select { width: 115px; flex-shrink: 0; min-height: 38px; padding: 6px; }
.shop-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid #eee7ee; }
.shop-price { font: 500 23px/1.4 var(--serif); color: var(--accent); white-space: nowrap; }
.shop-unit { max-width: 105px; color: #938195; font-size: 10px; line-height: 1.6; text-align: end; }
.shop-empty { grid-column: 1 / -1; padding: 50px 22px; text-align: center; border: 1px dashed #d7c9d7; border-radius: 4px; }
.shop-empty>span { font: 45px/1 var(--serif); color: #b093a6; }
.shop-empty h3 { margin: 16px 0 10px; font: 500 21px var(--serif); color: #503c52; }
.shop-empty p { font-size: 13px; line-height: 1.8; color: #86738a; }
.shop-empty button { margin-top: 22px; color: var(--accent); text-decoration: underline; }
html[lang="ar"] .shop-intro h1 { letter-spacing: 0; }
html[lang="ar"] .shop-description { font-size: 14px; }
html[lang="ar"] .shop-kind, html[lang="ar"] .shop-unit { font-size: 12px; }

.shop-price { display: inline-flex; align-items: center; gap: 7px; }
.a-coin-icon { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.shop-item-icon img { width: 48px; height: 48px; }
.shop-description { white-space: pre-line; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.shop-sort { position:relative; }
.shop-sort::after { content:""; position:absolute; inset-inline-end:16px; bottom:19px; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); pointer-events:none; }
#shop-sort { appearance:none; width:210px; max-width:100%; min-height:44px; padding:10px 16px; padding-inline-end:42px; border:1px solid #dcd3df; border-radius:3px; background:#fff; color:#403448; font:inherit; font-size:13px; }
#shop-sort:focus-visible { outline:2px solid #a87587; outline-offset:2px; }