@charset "UTF-8";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{min-height:100vh;width:100%}body{font-family:PingFang TC,Microsoft JhengHei,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background-color:#fffaf5}h1{text-align:center;padding:20px}a{text-decoration:none;color:inherit}.container{padding:30px}.cart-flex{display:flex;flex-direction:column;gap:24px;width:80%;list-style:none;margin:20px auto;padding-bottom:120px;max-width:900px}.cart-card{display:grid;grid-template-columns:150px 1fr auto;gap:10px;height:100%;background:#f5f5f5;transition:transform .3s,box-shadow .3s;border:1px solid #bebebe;border-radius:8px;overflow:hidden;padding:20px;align-items:center}.cart-card .cart-img{width:100%;aspect-ratio:1/1;overflow:hidden;background-color:#fff;padding:10px;box-sizing:border-box}.cart-card .cart-img a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;text-decoration:none}.cart-card .cart-img img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .3s ease-in-out}.cart-card .cart-img:hover img{transform:scale(1.05)}.cart-card .item-info{display:flex;flex-direction:column;justify-content:center;padding:15px;position:relative}.cart-card .item-info .item-delete{position:absolute;top:2px;right:2px;color:#7c7c7c;background-color:#f5f5f5;border:none;cursor:pointer;font-size:24px;align-items:center;justify-content:center}.cart-card .item-info .item-delete:hover{color:#333}.cart-card .item-info .item-title{font-weight:600;padding-right:35px}.cart-card .item-info .item-title:hover{opacity:.7;text-decoration:underline}.cart-card .item-info .item-category{color:#7c7c7c}.cart-card .item-info .item-qty{align-self:flex-end;margin-top:auto;overflow:hidden}.cart-card .item-info .item-qty .qty-btn{width:32px;height:32px;background-color:#f5f5f5;border:none;cursor:pointer;font-size:20px;align-items:center;justify-content:center}.cart-card .item-info .item-qty .qty-btn:hover{background-color:#f5f5f5}.cart-card .item-info .item-qty .qty-input{width:32px;height:32px;text-align:center;border:none;outline:none;font-weight:500}.cart-card .item-info .item-qty .qty-input::-webkit-outer-spin-button,.cart-card .item-info .item-qty .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cart-card .item-info .item-qty .qty-input{-moz-appearance:textfield;appearance:textfield}.cart-card .item-info .item-subtotal{color:#e67e22}.cart-footer{display:flex;position:sticky;background-color:#fff;justify-content:flex-end;align-items:center;gap:30px;padding:20px 5%;box-sizing:border-box;position:fixed;left:0;right:0;bottom:0;box-shadow:0 -4px 12px #bebebe;z-index:999}.cart-footer .total-price{display:flex;align-items:baseline;gap:10px;color:#333;font-weight:500}.cart-footer .total-price span{font-size:24px;color:#e67e22;font-weight:700}.cart-footer .checkout-btn{background-color:#e67e22;color:#fff;border:none;padding:12px 32px;font-size:18px;font-weight:600;border-radius:6px;cursor:pointer;box-shadow:0 4px 6px #0000001a}.cart-footer .checkout-btn:hover{background-color:#e67e22;color:#fff;transform:translateY(-2px);box-shadow:0 6px 12px #e67e224d}.cart-footer .checkout-btn:active{transform:translateY(0)}@media(max-width:768px){.cart-flex{width:95%;padding-top:12px;padding-bottom:80px;gap:12px}.cart-card{grid-template-columns:100px 1fr;padding:12px;min-height:auto;position:relative;align-items:center;gap:12px}.cart-card .item-info{display:flex;flex-direction:column;gap:4px;padding:0}.cart-card .item-info .item-delete{top:0;right:0;font-size:20px;opacity:.5}.cart-card .item-info .item-title{padding-top:5px;font-size:15px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.cart-card .item-info .item-category{font-size:12px}.cart-card .item-info .item-subtotal{font-size:16px;font-weight:600;margin-bottom:0}.cart-card .item-info .item-qty{border-radius:6px;border:none;height:30px;margin-top:0}.cart-card .item-info .item-qty .qty-btn{width:30px;height:30px;color:#7c7c7c}.cart-card .item-info .item-qty .qty-input{width:30px;font-size:14px}.cart-footer{padding:12px 20px;height:auto;display:flex;justify-content:space-between;align-items:center;background-color:#fffffffa;box-shadow:0 -1px #bebebe}.cart-footer .total-amount-section{display:flex;flex-direction:column;gap:2px}.cart-footer .total-amount-section .label{font-size:12px;color:#7c7c7c}.cart-footer .total-amount-section .price{font-size:20px;font-weight:700;color:#e67e22}.cart-footer .checkout-btn{width:auto;min-width:120px;padding:10px 20px;background-color:#e67e22;color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:600;box-shadow:0 4px 10px #e67e2233}}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1200px;margin:0 auto;list-style:none;padding:0}@media(min-width:768px){.product-grid{grid-template-columns:repeat(4,1fr);gap:30px 20px}}.card{display:flex;flex-direction:column;height:100%;background:#f5f5f5;transition:transform .3s,box-shadow .3s;border:1px solid #f5f5f5;border-radius:8px;overflow:hidden}@media(hover:hover){.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #bebebe}.card:hover img{transform:scale(1.08)}}.card:active{transform:scale(.98)}.card a{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;text-decoration:none}.card a .card-img-placeholder{width:100%;aspect-ratio:1/1;overflow:hidden;background-color:#fff;padding:10px;box-sizing:border-box;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;justify-content:center}.card a .card-img-placeholder img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .4s ease}.card a .card-info{text-align:left;display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;padding:15px}.card a .card-info .title{font-size:16px;font-weight:600;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;height:1.8em;padding:6px 0}.card a .card-info .price{font-size:17px;letter-spacing:.5px;color:#e67e22}.global-toast{position:fixed;top:120px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:16px 24px;border-radius:8px;box-shadow:0 4px 20px #7c7c7c;z-index:10000;max-width:350px;line-height:1.5;text-align:center;word-break:break-all;white-space:pre-line}.toast-fade-enter-active,.toast-fade-leave-active{transition:all .4s ease}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0;transform:translate(-50%,-20px)}.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;flex-wrap:wrap;background-color:#fff;border-bottom:1px solid #bebebe;box-shadow:0 3px 10px #bebebe;padding:15px 30px;gap:8px}@media(max-width:480px){.navbar{justify-content:center;padding:10px;gap:5px;box-shadow:none}}.navbar #nav-search-target{margin-left:auto;display:flex;align-items:stretch;padding:10px}.navbar #nav-search-target input{background-color:#fffaf5;border-radius:4px 0 0 4px;border:1px solid;border-right:none;padding:6px 12px;color:#333}.navbar #nav-search-target input:focus{background-color:#fff}@media(max-width:480px){.navbar #nav-search-target{flex-basis:100%;margin-left:0;order:3}.navbar #nav-search-target input{flex:1;font-size:16px;height:40px}.navbar #nav-search-target .select{width:80px;height:40px;padding-left:5px}}.navbar #nav-search-target .select{border-radius:0 4px 4px 0;border:1px solid #333;background-color:#fffaf5;cursor:pointer}.navbar .nav-img img{width:60px;margin-right:5px}@media(max-width:480px){.navbar .nav-img img{width:50px;margin-top:5px}}.navbar .nav-button{position:relative;color:#e67e22;font-weight:500;transition:all .3s ease;padding:8px 14px;border-radius:4px}.navbar .nav-button:hover{background-color:#ffe6ba;color:#d35400}.navbar .nav-button.router-link-active{color:#d35400;font-weight:700}.navbar .nav-button.router-link-active:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:15px;height:2px;background-color:#d35400}.navbar .nav-button .cart-badge{position:absolute;top:2px;right:2px;background-color:#e67e22;color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center}.navbar .user-menu{display:flex;align-items:center;gap:8px}.navbar .user-menu .user-name{color:#e67e22}.navbar .user-menu button{height:32px;line-height:1;padding:4px 12px;margin-top:2px;background-color:#e67e221a;color:#e67e22;border-radius:50px;border:none;font-size:14px;cursor:pointer;transition:.2s}.navbar .user-menu button:hover{background-color:#e67e22;color:#fff}.empty{text-align:center;padding:20px 0;color:#bebebe;margin:auto auto 40px;grid-column:1/-1}.empty .emoji{font-size:40px;margin-bottom:10px}.skeleton .skeleton-img,.skeleton .skeleton-text,.skeleton .skeleton-btn{background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 2s infinite linear}.card-content-enter{animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-img{width:100%;aspect-ratio:1/1}.skeleton-text{height:1rem;border-radius:4px}.skeleton-text.title{width:80%;margin-bottom:10px}.skeleton-text.price{width:40%}.skeleton-btn{height:40px;border-radius:6px;margin-top:auto}.detail-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1200px;margin:60px auto;padding:40px;background-color:#f5f5f5;border-radius:12px}.detail-container .detail-image{background:#fff;border-radius:12px;padding:40px;display:flex;align-items:center;justify-content:center}.detail-container .detail-image img{max-width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}.detail-container .detail-info{display:flex;flex-direction:column}.detail-container .detail-info .breadcrumb{color:#7c7c7c;font-size:14px;margin-bottom:10px}.detail-container .detail-info .title{font-size:28px;font-weight:700;margin-bottom:10px}.detail-container .detail-info .variant-options{display:flex;gap:10px;margin-bottom:12px}.detail-container .detail-info .variant-options button{font-size:14px;padding:5px 16px;background-color:#ffe6ba;border:2px solid transparent;border:none;cursor:pointer;border-radius:10px;transition:all .2s ease}.detail-container .detail-info .variant-options button:hover{background-color:#e67e2280}.detail-container .detail-info .variant-options button.active{background-color:#e67e22;color:#fff;border-color:#e67e22;box-shadow:0 2px 8px #e67e2266}.detail-container .detail-info .price-tag{background:transparent;color:#d35400;font-size:1.5rem;font-weight:700;margin-bottom:30px}.detail-container .detail-info .price-tag .label{font-size:14px;color:#7c7c7c}.detail-container .detail-info .price-tag .amount{margin-left:10px;font-size:28px;font-weight:700;color:#e67e22}.detail-container .detail-info .description{margin-bottom:40px}.detail-container .detail-info .description h3{font-size:18px;margin-bottom:10px;border-bottom:1px solid #bebebe;padding-bottom:10px}.detail-container .detail-info .description p{line-height:1.8;color:#555}.detail-container .detail-info .purchase-section{display:flex;gap:20px;margin-top:auto}.detail-container .detail-info .purchase-section .qty-selector{display:flex;border:1px solid #bebebe;border-radius:8px;overflow:hidden}.detail-container .detail-info .purchase-section .qty-selector .qty-btn{font-size:24px;width:45px;height:50px;border:none;background:#fff;cursor:pointer}.detail-container .detail-info .purchase-section .qty-selector .qty-btn:hover{background:#f5f5f5}.detail-container .detail-info .purchase-section .qty-selector .qty-input{width:60px;border:none;border-left:1px solid #bebebe;border-right:1px solid #bebebe;text-align:center;font-size:18px}.detail-container .detail-info .purchase-section .qty-selector .qty-input::-webkit-outer-spin-button,.detail-container .detail-info .purchase-section .qty-selector .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.detail-container .detail-info .purchase-section .qty-selector .qty-input{-moz-appearance:textfield;appearance:textfield}.detail-container .detail-info .purchase-section .add-to-cart-btn{flex:1;background:#e67e22;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer}.detail-container .detail-info .purchase-section .add-to-cart-btn:hover{transform:translateY(-2px)}.detail-container .detail-info .purchase-section .add-to-cart-btn:active{transform:translateY(0)}@media(max-width:768px){.detail-container{grid-template-columns:1fr;gap:30px;margin:20px auto;width:95%}.detail-container .detail-info .title{font-size:24px;text-align:left;padding:10px 0}.detail-container .detail-info .purchase-section .qty-selector .qty-input{width:50px}}.login-container{display:flex;flex-direction:column;align-items:center;padding:20px}.orange-divider{width:30px;border:2px solid #e67e22;margin-bottom:20px}form{display:flex;flex-direction:column;width:100%;max-width:300px;gap:10px}form input{width:100%;padding:8px;border:1px solid #bebebe;box-sizing:border-box;border-radius:6px}.button-group{display:flex;justify-content:center;gap:10px;margin-top:10px}.button-group button{padding:5px 16px;background-color:#ffe6ba;border:none;cursor:pointer;border-radius:10px}.error-text{color:#ff4d4f;font-size:14px;margin-top:8px}