/* Customer account and collection drawers */
.shop-modal-open { overflow: hidden; }
.header-icon:not(:disabled) { cursor: pointer; }
.header-icon.signed-in::after { content: ''; position: absolute; right: 1px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: #78875a; border: 2px solid #fff; }
.shop-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; padding: 0; color: #28251e; background: #faf8f3; overflow-y: auto; overscroll-behavior: contain; box-shadow: -20px 0 80px #0002; }
.shop-dialog[open] { animation: shop-enter .25s ease-out; }
.shop-dialog::backdrop { background: #17151080; backdrop-filter: blur(4px); }
.shop-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border-bottom: 1px solid #ddd8cc; }
.shop-eyebrow, .shop-kicker { font-size: 10px; letter-spacing: 2px; font-weight: 600; }
.shop-eyebrow { color: #756449; }
.shop-close { background: transparent; border: 1px solid #dcd5c8; border-radius: 50%; width: 40px; height: 40px; font-size: 26px; cursor: pointer; color: inherit; }
.shop-panel-intro { padding: 35px 34px 25px; background: linear-gradient(125deg,#eee7d9,#faf8f3); border-bottom: 1px solid #e3ddcf; }
.shop-kicker { display: block; color: #8a573a; margin-bottom: 16px; }
.shop-panel-intro h2 { font: 400 clamp(30px,5vw,42px)/1.12 Georgia,serif; max-width: 390px; margin: 0 0 12px; }
.shop-panel-intro p { font-size: 13px; color: #777064; }
.shop-panel-body { padding: 26px 34px 40px; }
.shop-tabs { display: flex; gap: 20px; border-bottom: 1px solid #ddd5c8; margin-bottom: 24px; }
.shop-tabs button { border: 0; background: transparent; color: #81776a; padding: 12px 0; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; }
.shop-tabs button[aria-pressed="true"] { color: #71391f; border-bottom-color: #71391f; }
.shop-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; min-width: 0; font-size: 12px; }
.shop-field input { width: 100%; min-width: 0; border: 1px solid #dcd6ca; border-radius: 5px; background: #fffdf9; font: inherit; font-size: 16px; color: #28251e; padding: 12px 13px; }
.shop-field input:focus { outline: 2px solid #997556; outline-offset: 2px; }
.shop-hint { font-size: 11px; color: #756c5e; margin: -6px 0 18px; }
.shop-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.shop-full { grid-column: 1 / -1; }
.shop-address { border-top: 1px solid #ddd5c8; margin-top: 24px; padding-top: 16px; }
.shop-address summary { cursor: pointer; font-size: 13px; margin-bottom: 16px; }
.shop-primary { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #783f26; border: 1px solid #783f26; color: #fff; font-size: 13px; border-radius: 5px; cursor: pointer; text-align: left; }
.shop-primary:hover { background: #57301f; }
.shop-dialog button:disabled { opacity: .5; cursor: wait; }
.shop-dialog :focus-visible, .shop-add:focus-visible { outline: 2px solid #996345; outline-offset: 3px; }
.shop-error { color: #a12b23; font-size: 12px; margin: 12px 0; }
.shop-error:empty { display: none; }
.shop-text-button { padding: 14px 0; border: 0; background: none; color: #783f26; cursor: pointer; font-size: 13px; }
.shop-member { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; }
.shop-avatar { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; background: #e8deca; color: #6c422c; font: 28px Georgia,serif; }
.shop-member h3 { font: 24px Georgia,serif; overflow-wrap: anywhere; }
.shop-member p { font-size: 12px; color: #746a5f; overflow-wrap: anywhere; }
.shop-member-id { padding: 15px; border: 1px dashed #cabeaa; border-radius: 6px; margin-bottom: 25px; }
.shop-member-id span { display: block; font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; color: #7e715f; }
.shop-member-id code { font-size: 11px; overflow-wrap: anywhere; }
.shop-section-title { font: 20px Georgia,serif; margin: 24px 0 20px; }
.shop-empty { text-align: center; padding: 35px 0; }
.shop-empty-mark { width: 84px; height: 84px; margin: 0 auto 28px; border-radius: 50%; background: #eee6d7; color: #865c3c; font: 44px Georgia,serif; display: grid; place-items: center; }
.shop-empty h3 { font: 28px Georgia,serif; margin-bottom: 12px; }
.shop-empty p { font-size: 13px; color: #776e61; margin-bottom: 30px; }
.shop-cart-item { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid #e1dacc; }
.shop-product-art { position: relative; display: grid; place-items: center; width: 90px; height: 112px; flex-shrink: 0; border-radius: 5px; background: #e9e0d1; overflow: hidden; }
.shop-product-art > span { font: 34px Georgia,serif; color: #957759; }
.shop-product-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-product-art img[hidden] { display: none; }
.shop-cart-info { flex: 1; min-width: 0; }
.shop-cart-info small { font-size: 9px; letter-spacing: 1.4px; color: #8a7358; }
.shop-cart-info h3 { font: 20px/1.25 Georgia,serif; margin: 5px 0 8px; }
.shop-cart-info p { font-size: 12px; color: #746552; }
.shop-cart-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.shop-quantity { display: flex; align-items: center; border: 1px solid #d6cdbc; border-radius: 4px; }
.shop-quantity button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: #463523; }
.shop-quantity output { min-width: 28px; text-align: center; font-size: 12px; }
.shop-remove { border: 0; padding: 5px; background: none; color: #7c7164; text-decoration: underline; font-size: 11px; cursor: pointer; }
.shop-summary { margin: 28px 0 20px; padding: 20px; border-radius: 5px; background: #eee7db; }
.shop-summary > div { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.shop-summary strong { text-align: right; }
.shop-summary p, .shop-cart-signin p { font-size: 11px; color: #756957; margin-top: 12px; }
.shop-cart-signin { margin-bottom: 15px; }
.shop-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; transform: translate(-50%,20px); background: #28251e; color: #fff; padding: 14px 24px; border-radius: 6px; font-size: 13px; box-shadow: 0 8px 30px #0003; max-width: calc(100% - 32px); opacity: 0; pointer-events: none; transition: .2s ease; }
.shop-toast.visible { opacity: 1; transform: translate(-50%,0); }
.shop-product-wrap { min-width: 0; display: flex; flex-direction: column; }
.shop-product-wrap > .product-card { flex: 1; }
.shop-add { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; margin-top: 12px; border: 1px solid #d7ccbb; border-radius: 4px; background: #faf7f0; color: #6f4229; cursor: pointer; font-size: 12px; }
.shop-add:hover { background: #eee5d5; }
.shop-add:disabled { opacity: .5; cursor: wait; }
.product-info-inner .shop-add { margin: 24px 0 12px; padding: 18px; background: #783f26; color: #fff; }
@keyframes shop-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 480px) { .shop-panel-head { padding: 16px 20px; } .shop-panel-intro { padding: 28px 22px 20px; } .shop-panel-body { padding: 22px; } .shop-cart-item { gap: 12px; } .shop-product-art { width: 72px; height: 98px; } }
@media (prefers-reduced-motion: reduce) { .shop-dialog[open] { animation: none; } .shop-toast { transition: none; } }