:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; background:#151629; color:#fbf8ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 5% 4%, #603d57 0, transparent 30rem), #151629; }
button,input { font:inherit; }
.shop-shell { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:26px 0 140px; }
.shop-back { color:#dcd4e9; text-decoration:none; font-size:.9rem; }
.shop-heading { padding:34px 0 22px; }
.shop-heading p { margin:0 0 8px; color:#ffb7c8; letter-spacing:.14em; font-size:.75rem; font-weight:800; }
.shop-heading h1 { margin:0; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:.04em; }
.shop-heading span { display:block; margin-top:12px; color:#d6d2df; }
.shop-controls { display:grid; gap:12px; }
.shop-controls-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(152px,220px); gap:10px; }
.shop-sort { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; color:#d6d2df; font-size:.82rem; }
.shop-sort select { width:100%; border:1px solid #615e75; border-radius:12px; padding:12px 10px; background:#28283d; color:#fff; }
.shop-subcategories { padding-left:8px; }
#shop-search { width:100%; border:1px solid #615e75; border-radius:14px; padding:13px 15px; background:#28283d; color:#fff; }
.shop-categories { display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.shop-categories button { flex:0 0 auto; border:1px solid #615e75; border-radius:999px; background:#25263a; color:#f3effa; padding:8px 12px; cursor:pointer; }
.shop-categories button[aria-pressed="true"] { border-color:#ff7f9d; background:#ff6b75; color:#251625; font-weight:800; }
.postcard-bundle-feature[hidden] { display:none; }
.postcard-bundle-feature { margin-top:18px; }
.postcard-bundle-builder { overflow:clip; border:1px solid #77728c; border-radius:22px; background:rgba(42,43,65,.96); box-shadow:0 16px 42px #08081355; }
.postcard-bundle-builder > summary { display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:14px; align-items:center; padding:18px; cursor:pointer; list-style:none; }
.postcard-bundle-builder > summary::-webkit-details-marker { display:none; }
.postcard-bundle-builder > summary::after { content:"＋"; color:#ffb7c8; font-size:1.35rem; font-weight:800; transition:transform .18s ease; }
.postcard-bundle-builder[open] > summary::after { transform:rotate(45deg); }
.postcard-bundle-builder > summary > span { display:grid; gap:5px; min-width:0; }
.postcard-bundle-builder small { color:#ffb7c8; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.postcard-bundle-builder > summary strong { font-size:clamp(1.15rem,3vw,1.6rem); }
.postcard-bundle-builder > summary b { color:#9ce9db; font-size:1.25rem; }
.postcard-bundle-builder > summary span span { color:#d6d2df; font-size:.82rem; line-height:1.5; }
.postcard-bundle-body { padding:18px; border-top:1px solid #55546c; }
.postcard-bundle-body > header { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.postcard-bundle-body h2 { margin:4px 0 0; }
.postcard-bundle-body header p { max-width:34rem; margin:0; color:#d6d2df; line-height:1.6; }
.postcard-bundle-search { display:grid; gap:6px; margin-top:18px; color:#d6d2df; font-size:.8rem; font-weight:700; }
.postcard-bundle-search input { width:100%; border:1px solid #706d86; border-radius:12px; padding:11px 13px; background:#202136; color:#fff; }
.postcard-bundle-filter-result { margin:10px 0; color:#d6d2df; font-size:.82rem; }
.postcard-bundle-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.postcard-bundle-option { min-width:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr; border:1px solid #5d5b73; border-radius:14px; background:#303046; }
.postcard-bundle-option[data-selected-count]:not([data-selected-count="0"]) { border-color:#9ce9db; box-shadow:inset 0 0 0 1px #9ce9db55; }
.postcard-bundle-option-image { display:grid; place-items:center; aspect-ratio:1; overflow:hidden; background:#f9f7f5; }
.postcard-bundle-option-image img { min-width:0; min-height:0; max-width:100%; max-height:100%; width:100%; height:100%; display:block; object-fit:contain; padding:4px; }
.postcard-bundle-option-body { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px; }
.postcard-bundle-option h3 { min-width:0; margin:0; font-size:.82rem; line-height:1.4; overflow-wrap:anywhere; }
.postcard-bundle-quantity { display:grid; grid-template-columns:38px 30px 38px; align-items:center; }
.postcard-bundle-quantity button { width:38px; min-height:40px; border:1px solid #706d86; border-radius:9px; background:#202136; color:#fff; cursor:pointer; }
.postcard-bundle-quantity button:disabled { cursor:not-allowed; opacity:.35; }
.postcard-bundle-quantity output { text-align:center; font-weight:800; }
.postcard-bundle-actions { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; margin:10px -18px 14px; padding:14px 18px; border-top:1px solid #55546c; background:#222338f2; backdrop-filter:blur(12px); }
.postcard-bundle-actions p { margin:0 0 5px; color:#d6d2df; font-size:.8rem; }
.postcard-bundle-actions button { min-height:44px; border:1px solid #706d86; border-radius:10px; padding:9px 13px; background:#303046; color:#fff; font-weight:800; cursor:pointer; }
.postcard-bundle-actions .postcard-bundle-add { border:0; background:#ff6b75; color:#241826; }
.postcard-bundle-actions button:disabled { cursor:not-allowed; opacity:.4; }
.postcard-bundle-stamps { display:grid; grid-template-columns:repeat(10,minmax(14px,24px)); gap:4px; }
.postcard-bundle-stamps span { display:grid; place-items:center; aspect-ratio:4/5; border:1px dashed #77728c; border-radius:5px; color:#a9a5b7; font-size:.65rem; }
.postcard-bundle-stamps span[data-selected="true"] { border-color:#9ce9db; background:#9ce9db; color:#202136; }
.shop-status { min-height:1.5em; color:#d6d2df; margin:18px 0 10px; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.shop-card { display:flex; flex-direction:column; min-width:0; border:1px solid #5d5b73; border-radius:18px; overflow:hidden; background:rgba(48,48,70,.94); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.shop-card-image-button { border:0; padding:0; cursor:pointer; background:#f9f7f5; }
.shop-card-image { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#f9f7f5; padding:6px; }
.shop-card-image-button:focus-visible { outline:3px solid #ffe4a7; outline-offset:-3px; }
.shop-card-body { display:grid; gap:10px; padding:13px; }
.shop-variant-selectors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.shop-variant-selectors label { display:grid; gap:4px; color:#dedbec; font-size:.76rem; font-weight:700; }
.shop-card-category { color:#f9b2c3; font-size:.77rem; margin:0; }
.shop-card h2 { font-size:1rem; margin:0; line-height:1.45; }
.shop-card-price { font-weight:800; margin:0; }
.shop-card select,.shop-card button { width:100%; border-radius:10px; padding:10px; }
.shop-card select { border:1px solid #706d86; background:#202136; color:#fff; }
.shop-card button,.shop-checkout { border:0; background:#ff6b75; color:#241826; font-weight:800; cursor:pointer; }
.shop-card button:focus-visible,.shop-checkout:focus-visible,.shop-categories button:focus-visible,#shop-search:focus-visible { outline:3px solid #ffe4a7; outline-offset:2px; }
.shop-cart-toggle { position:fixed; z-index:3; right:18px; bottom:18px; min-height:44px; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:999px; padding:10px 16px 10px 12px; background:#ff6b75; color:#241826; font-weight:800; box-shadow:0 12px 32px #08081388; cursor:pointer; }
.shop-cart-icon { font-size:1.35rem; line-height:1; }
.shop-cart-toggle b { display:inline-grid; place-items:center; min-width:21px; height:21px; border-radius:99px; margin-left:5px; background:#241826; color:#fff; }
.shop-cart { position:fixed; z-index:4; right:18px; bottom:70px; width:min(390px, calc(100% - 36px)); max-height:min(76dvh,620px); overflow:auto; border:1px solid #77728c; border-radius:18px; padding:14px; background:#222338f2; backdrop-filter:blur(12px); box-shadow:0 16px 48px #08081388; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(calc(100% + 18px)); transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s; }
.shop-cart[data-open="true"] { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
.shop-cart-title { display:flex; align-items:center; gap:8px; font-weight:800; }
.shop-cart-title > span { margin-right:auto; }
.shop-cart-title b { display:grid; place-items:center; min-width:24px; height:24px; border-radius:99px; background:#ffafc4; color:#2b1c2b; }
.shop-cart-close { min-width:44px; min-height:44px; display:grid; place-items:center; border:0; background:transparent; color:#fff; font-size:1.5rem; cursor:pointer; }
.cart-items { max-height:260px; overflow:auto; padding:10px 0; color:#d9d5e0; font-size:.88rem; }
.cart-item { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #4d4c63; }
.cart-item img { width:54px; height:54px; object-fit:contain; background:#fff; border-radius:8px; }
.cart-item strong,.cart-item span { display:block; line-height:1.45; }
.cart-item span { color:#d6d2df; font-size:.82rem; margin-top:3px; }
.quantity-stepper { display:grid; grid-template-columns:36px minmax(30px,1fr) 36px; align-items:center; border:1px solid #706d86; border-radius:10px; overflow:hidden; }
.quantity-stepper button { width:auto; min-width:0; border:0; border-radius:0; padding:8px 4px; background:#393950; color:#fff; cursor:pointer; }
.quantity-stepper output { display:grid; place-items:center; min-height:34px; font-weight:800; }
.cart-line-stepper { width:min(214px,100%); grid-template-columns:36px 34px 36px auto; margin-top:8px; }
.cart-line-stepper .cart-remove { background:transparent; color:#ffb5c7; padding:8px 10px; font-size:.78rem; }
.cart-total { display:flex; justify-content:space-between; border-top:1px solid #5c5c73; padding-top:10px; }
.cart-total-grand { margin-top:9px; color:#ffb5c7; font-size:1.05rem; }
.cart-note { color:#c6c2d2; font-size:.75rem; line-height:1.5; }
.shop-checkout { width:100%; padding:12px; border-radius:11px; }
.shop-checkout:disabled { cursor:not-allowed; opacity:.45; }
.shop-product-detail { width:min(860px, calc(100% - 28px)); max-height:min(92dvh,900px); border:1px solid #77728c; border-radius:18px; padding:0; color:#fbf8ff; background:#222338; box-shadow:0 24px 80px #080813dd; }
.shop-product-detail::backdrop { background:#080813aa; backdrop-filter:blur(4px); }
.shop-product-detail-panel { position:relative; padding:20px; }
.shop-product-detail-close { position:absolute; z-index:1; top:8px; right:10px; width:38px; height:38px; border:0; border-radius:999px; background:#37374e; color:#fff; font-size:1.5rem; cursor:pointer; }
.shop-detail-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.9fr); gap:24px; align-items:start; }
.shop-detail-image { width:100%; max-height:72dvh; object-fit:contain; background:#f9f7f5; border-radius:12px; }
.shop-detail-copy { min-width:0; padding-top:10px; }
.shop-detail-copy h2 { margin:4px 0 8px; font-size:clamp(1.2rem, 3vw, 1.8rem); line-height:1.4; }
.shop-detail-price { margin:0 0 18px; color:#ffb7c8; font-weight:800; font-size:1.2rem; }
.shop-detail-copy section { margin-top:16px; padding-top:14px; border-top:1px solid #55546c; }
.shop-detail-copy h3 { margin:0 0 8px; color:#ffb7c8; font-size:1rem; }
.shop-detail-copy p { margin:0 0 8px; color:#e2deeb; line-height:1.7; }
.shop-detail-variants { margin-top:16px !important; }
.shop-detail-shipping p + p { color:#c9c5d5; font-size:.88rem; }
.verification-shell { width:min(620px, calc(100% - 32px)); }
.verification-card { border:1px solid #6f6b83; border-radius:18px; padding:24px; background:rgba(48,48,70,.94); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.verification-card h2 { margin:0 0 10px; }
.verification-card p { color:#d6d2df; line-height:1.7; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:560px) { .shop-shell { width:min(100% - 20px, 540px); padding-top:17px; padding-bottom:92px; } .shop-heading { padding-top:26px; } .shop-controls-main { grid-template-columns:1fr; } .shop-sort { grid-template-columns:64px minmax(0,1fr); } .postcard-bundle-builder { border-radius:16px; } .postcard-bundle-body > header { display:block; } .postcard-bundle-body header p { margin-top:8px; } .postcard-bundle-options { grid-template-columns:1fr; } .postcard-bundle-option { grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr); grid-template-rows:1fr; } .postcard-bundle-option-body { grid-template-columns:1fr; align-content:center; } .postcard-bundle-actions { grid-template-columns:1fr 1fr; } .postcard-bundle-actions > div { grid-column:1/-1; } .postcard-bundle-actions button { padding-inline:7px; } .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .shop-card { border-radius:14px; } .shop-card-body { padding:10px; gap:8px; } .shop-card h2 { font-size:.88rem; } .shop-card button,.shop-card select { font-size:.83rem; padding:9px 7px; } .shop-variant-selectors { gap:6px; } .shop-variant-selectors label { font-size:.7rem; } .shop-cart-toggle { right:12px; bottom:12px; } .shop-cart { right:0; bottom:0; width:100%; border-radius:20px 20px 0 0; } .shop-product-detail { width:100%; max-height:92dvh; margin:0; border-radius:20px 20px 0 0; } .shop-product-detail-panel { padding:52px 14px 20px; } .shop-detail-content { grid-template-columns:1fr; gap:14px; } .shop-detail-image { max-height:48dvh; } }
@media (prefers-reduced-motion:no-preference) { .shop-card { transition:transform .16s ease, border-color .16s ease; } .shop-card:hover { transform:translateY(-3px); border-color:#ff91ab; } }