/* --- Shop Grid --- */
.px-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1200px; margin: 0 auto; width: 100%; padding: 20px 15px; box-sizing: border-box; }
.px-bar { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-bottom: 30px; background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #eaeaea; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.px-search-wrap { flex: 1; position: relative; min-width: 250px; }
.px-search-wrap input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; padding-right: 40px; box-sizing: border-box; }
.px-search-wrap i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; }
.px-count { background: #f3f3f3; padding: 8px 15px; border-radius: 4px; font-size: 14px; font-weight: 600; color: #555; }
.px-sort select { padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; background: #fff; }
.px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-bottom: 30px; }
.px-card { border: 1px solid #eaeaea !important; border-radius: 12px !important; overflow: hidden !important; background: #fff !important; transition: 0.3s; display: flex; flex-direction: column; transform: translateZ(0); box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin: 0 !important; }
.px-card:hover { transform: translateY(-5px) translateZ(0); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.px-img-wrap { height: 200px; overflow: hidden !important; position: relative; display: block; margin: 0 !important; padding: 0 !important; border-radius: 12px 12px 0 0 !important; }
.px-img { width: 100% !important; height:100%; object-fit: cover !important; transition: 0.5s; margin: 0 !important; padding: 0 !important; border-radius: 12px 12px 0 0 !important; display: block !important; border: none !important; }
.px-card:hover .px-img { transform: scale(1.05); }
.px-body { padding: 20px !important; flex: 1; display: flex; flex-direction: column; text-align: left; }
.px-title { font-size: 17px !important; font-weight: 700 !important; color: #222 !important; margin: 0 0 10px 0 !important; text-decoration: none; line-height: 1.4 !important; }
.px-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; margin-bottom: 15px; }
.px-price { font-size: 18px !important; font-weight: 800 !important; color: #222 !important; margin-top: auto; margin-bottom: 15px !important; }
.px-btn { display: block !important; width: 100% !important; padding: 12px !important; text-align: center !important; background: #f39c12 !important; color: #fff !important; font-weight: 700 !important; border-radius: 6px !important; text-decoration: none !important; box-sizing: border-box !important; border: none !important; }
.px-load-wrap { text-align: center; margin-top: 20px; }
.px-load-btn { background: #fff; border: 1px solid #ddd; color: #333; padding: 12px 30px; border-radius: 50px; cursor: pointer; font-weight: 600; }
.px-skel .px-img-wrap, .px-skel .px-title, .px-skel .px-meta, .px-skel .px-price, .px-skel .px-btn { background: #eee; color: transparent !important; pointer-events: none; border-radius: 4px; margin-bottom: 10px; }
.px-skel { animation: px-pulse 1.5s infinite; }
@keyframes px-pulse { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }

/* --- Single Product --- */
.px-s-wrap { display: flex; gap: 40px; margin-top: 30px; padding-bottom: 30px; align-items: flex-start; }
.px-L { width: 60%; } .px-R { width: 40%; min-width: 350px; position: sticky; top: 20px; }
.px-main-img { border-radius: 12px; width:100%; object-fit: cover; margin-bottom:10px; }
.px-thumbs { display: flex; gap: 10px; overflow-x: auto; }
.px-th { width: 70px; height: 70px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity:0.6; object-fit:cover;}
.px-th.active { border-color: #f39c12; opacity:1; }
.px-box { border: 1px solid #ddd; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.px-slider { display: flex; width: 200%; transition: transform 0.4s ease-in-out; }
.px-slide { width: 50%; padding: 25px; box-sizing: border-box; }
.px-lbl { font-weight: 700; font-size: 13px; color: #555; display: block; margin-bottom: 6px; margin-top: 15px; }
.px-inp, .px-sel { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background:#fff; box-sizing:border-box; }
.px-btn-act { width: 100%; padding: 15px; font-weight: 800; border: none; border-radius: 6px; cursor: pointer; text-transform: uppercase; font-size: 15px; margin-bottom: 10px; }
.px-btn-book { background: #f39c12; color: #fff; } .px-btn-book:hover { background: #e67e22; }
.px-btn-cart { background: #fff; border: 2px solid #3199aa; color: #3199aa; } .px-btn-cart:hover { background: #3199aa; color: #fff; }
.px-back { background: none; border: none; color: #666; cursor: pointer; margin-bottom: 15px; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.px-coupon-wrap { display: flex; gap: 5px; margin-top: 5px; }
.px-total-bar { background: #f9f9f9; padding: 15px; border-radius: 8px; margin: 20px 0; font-weight: 700; display:flex; justify-content:space-between; }
.px-short-desc { color:#666; font-size:15px; margin-bottom:20px; line-height:1.5; }
.px-split-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; margin-top:15px; }
.px-qty-wrap { display:flex; align-items:center; border:1px solid #ddd; border-radius:6px; width:120px; overflow:hidden; }
.px-qty-btn { width:40px; height:40px; border:none; background:#f9f9f9; cursor:pointer; font-size:18px; }
.px-qty-val { width:40px; text-align:center; border:none; outline:none; height:40px; font-weight:bold; background:#fff; }
.px-price-val { font-size:28px; font-weight:800; color:#222; }
.px-pay-methods { display:flex; flex-direction:column; gap:10px; margin-top:5px; margin-bottom:15px; padding:15px; background:#fafafa; border-radius:6px; border:1px solid #eee; }

/* --- Checkout --- */
.px-checkout-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.px-checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; }
.px-order-summary { background: #f9f9f9; padding: 25px; border-radius: 12px; border: 1px solid #eee; transition: opacity 0.3s ease; }
.px-order-summary h3 { margin-top: 0; margin-bottom: 20px; font-weight: 700; color: #333; }
.px-cart-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #eee; }
.px-cart-item:last-child { border-bottom: none; }
.px-item-details h4 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; }
.px-item-meta { font-size: 13px; color: #777; }
.px-item-price { font-weight: 700; color: #f39c12; }
.px-total-row { display: flex; justify-content: space-between; padding: 15px 0; font-weight: 700; font-size: 18px; border-top: 2px solid #ddd; margin-top: 15px; }
.px-billing-form { background: #fff; padding: 25px; border-radius: 12px; border: 1px solid #eee; }
.px-billing-form h3 { margin-top: 0; margin-bottom: 20px; font-weight: 700; color: #333; }
.px-form-group { margin-bottom: 20px; }
.px-form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; color: #555; }
.px-form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; box-sizing:border-box;}
.px-coupon-row { display: flex; gap: 10px; }
.px-coupon-row .px-form-control { flex: 1; }
.px-apply-btn { padding: 12px 20px; background: #333; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.px-pay-btn { width: 100%; padding: 15px; background: #f39c12; color: #fff; border: none; border-radius: 6px; font-weight: 800; font-size: 16px; cursor: pointer; margin-top: 20px; }
.px-pay-btn:hover { background: #e67e22; }
.px-empty-cart { text-align: center; padding: 60px 20px; background: #f9f9f9; border-radius: 12px; }
.px-empty-cart i { font-size: 64px; color: #ccc; margin-bottom: 20px; }
.px-empty-cart h3 { margin-bottom: 15px; }
.px-shop-link { display: inline-block; padding: 12px 30px; background: #f39c12; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; }

/* --- My Account Dashboard --- */
.px-dash-wrap { max-width: 1159px; margin: 40px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.px-auth-box { max-width: 400px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.px-auth-box h2 { text-align: center; margin-top:0; color:#333; }
.px-dash-grid { display: grid; grid-template-columns: 250px 1fr; gap: 30px; }
.px-sidebar { background: #fff; border-radius: 12px; padding: 30px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border:1px solid #f0f0f0; }
.px-user-card { text-align: center; margin-bottom: 30px; }
.px-user-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #f39c12; margin-bottom: 10px; }
.px-user-card h3 { margin: 0; font-size: 18px; color: #333; }
.px-user-card p { margin: 5px 0 0 0; font-size: 13px; color: #777; }
.px-dashboard-menu { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; text-align: left; }
.px-dashboard-menu a { display: block; padding: 12px 15px; color: #555; text-decoration: none; border-radius: 6px; font-weight: 600; transition: 0.3s; background: transparent; border: none; box-sizing: border-box; width: 100%; line-height: 1.2; text-align: left; }
.px-dashboard-menu a i { margin-right: 10px; width: 20px; text-align: center; display: inline-block; }
.px-dashboard-menu a:hover, .px-dashboard-menu a.active { background: #fef9e7; color: #d35400; }
.px-panel-wrap { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border:1px solid #f0f0f0; }
.px-panel { display: none; } .px-panel.active { display: block; animation: px-fade 0.4s; }
@keyframes px-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.px-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.px-stat-card { background: #f9f9f9; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #eee; }
.px-stat-card i { font-size: 24px; color: #f39c12; margin-bottom: 10px; display:block; }
.px-stat-num { font-size: 28px; font-weight: 800; color: #333; }
.px-stat-lbl { font-size: 13px; color: #666; text-transform: uppercase; font-weight:bold; }
.px-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.px-table th { background: #f4f4f4; padding: 12px; text-align: left; color: #333; font-weight: 700; border-bottom: 2px solid #ddd; }
.px-table td { padding: 15px 12px; border-bottom: 1px solid #eee; color: #555; vertical-align:middle; }
.px-badge { display:inline-block; padding:4px 8px; border-radius:4px; font-size:11px; font-weight:bold; }
.bg-ev { background:#e8f4f8; color:#2980b9; } .bg-pr { background:#fef0e6; color:#d35400; }
.px-btn-sm { padding: 6px 12px; background: #f39c12; color: #fff; text-decoration: none; border-radius: 4px; font-size: 12px; font-weight: bold; display:inline-block; border:none; cursor:pointer;}
.px-btn-sm:hover { background: #e67e22; color:#fff; }
.px-support-card { text-align:center; padding: 40px 20px; background:#fafafa; border-radius:12px; border:1px dashed #ddd; }

/* Print Receipt */
.receipt-box { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; box-shadow: 0 0 20px rgba(0,0,0,0.1); border-top: 8px solid #f39c12; }
.receipt-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; border-bottom: 2px solid #eee; padding-bottom: 20px; }
.receipt-logo { max-width: 200px; max-height: 80px; }
.receipt-title-area { text-align: right; }
.receipt-title-area h1 { margin: 0; color: #f39c12; font-size: 28px; text-transform: uppercase; }
.receipt-title-area p { margin: 5px 0 0 0; color: #777; }
.receipt-info-section { display: flex; justify-content: space-between; margin-bottom: 40px; }
.receipt-info-block { width: 48%; }
.receipt-info-block h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; color: #555; font-size: 16px; text-transform: uppercase; }
.receipt-info-block p { margin: 5px 0; font-size: 14px; }
.receipt-details-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.receipt-details-table th { background: #f9f9f9; text-align: left; padding: 12px; border-bottom: 2px solid #ddd; color: #333; }
.receipt-details-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.receipt-total-row { font-weight: bold; font-size: 18px; color: #f39c12; }
.receipt-total-row td { border-top: 2px solid #333; }
.receipt-footer { text-align: center; margin-top: 50px; font-size: 13px; color: #999; border-top: 1px solid #eee; padding-top: 20px; }

@media(max-width: 900px) { .px-s-wrap { flex-direction: column; } .px-L, .px-R { width: 100%; } }
@media(max-width: 768px) { .px-bar { flex-direction: column; align-items: stretch; } .px-checkout-grid, .px-dash-grid, .px-stats-grid { grid-template-columns: 1fr; } }
@media print { body { background: #fff; padding: 0; } .receipt-box { box-shadow: none; border: none; width: 100%; max-width: 100%; padding: 0; } }