/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #e91e63;
    --primary-dark: #c2185b;
    --bg: #fafafa;
    --surface: #fff;
    --text: #212121;
    --text-secondary: #757575;
    --border: #e0e0e0;
    --danger: #f44336;
    --success: #4caf50;
    --radius: 12px;
    --radius-sm: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* === Header === */
.header {
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
}

.header__left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.header__logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.header__cart {
    position: relative;
    color: var(--text);
    text-decoration: none;
    padding: 4px;
}

.header__cart-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    transition: transform 0.15s;
}
.header__cart-badge--bounce {
    animation: badge-bounce 0.4s ease;
}
@keyframes badge-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* === Main === */
.main { padding-top: 16px; padding-bottom: 32px; }
.has-footer .main { padding-bottom: 68px; }
.main--has-sticky { padding-bottom: 80px; }
.main--flush { padding-top: 0; }

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* === Category Bar (inside header) === */
.category-bar {
    background: var(--surface);
}

.category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 8px;
    padding-bottom: 8px;
}
.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.15s;
    flex-shrink: 0;
}
.category-tab:active { transform: scale(0.97); }

.category-tab--active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 8px 0;
}
.pagination__info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    gap: 6px;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn--primary:active { background: var(--primary-dark); }

.btn--danger { color: var(--danger); border-color: var(--danger); }

.btn--full { width: 100%; }

.btn--sm { padding: 6px 12px; font-size: 0.85rem; }

/* === Product Grid === */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.product-card {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform 0.15s;
    display: flex;
    flex-direction: column;
}
.product-card:active { transform: scale(0.98); }

.product-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.product-card__image {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--border);
    position: relative;
}

.product-card__out-of-stock {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    z-index: 1;
}
.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
}

/* No-image placeholder */
.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 16px;
}
.no-image-placeholder__icon { font-size: 2rem; opacity: 0.6; }
.no-image-placeholder__text { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.3; }
.no-image-placeholder--lg .no-image-placeholder__icon { font-size: 3rem; }
.no-image-placeholder--lg .no-image-placeholder__text { font-size: 0.95rem; }

.product-card__info { padding: 8px 10px 0; }
.product-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 10px;
}

.product-card__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

/* Cart button on product card */
.product-card__cart-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.3);
    transition: all 0.15s;
    text-decoration: none;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.product-card__cart-btn:active { transform: scale(0.9); }
.product-card__cart-btn--done {
    background: var(--success);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}

/* === Product Page === */
.product-gallery { border-radius: var(--radius); overflow: hidden; }
.product-gallery img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}

/* Full-width gallery: breaks out of container */
.product-gallery--full {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
}

.product-page__no-image {
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.product-page__info { margin-top: 16px; padding-bottom: 80px; }
.has-footer .product-page__info { padding-bottom: 120px; }
.product-page__title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.product-page__price { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.product-page__description { color: var(--text-secondary); margin-bottom: 20px; white-space: pre-line; }

/* Sticky add-to-cart bar */
.sticky-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 90;
}
.sticky-cart-bar__price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.sticky-cart-bar__btn { flex: 1; }
.has-footer .sticky-cart-bar { bottom: 53px; }

.swiper-pagination-bullet-active { background: var(--primary) !important; }

/* === Related Products === */
.related-section { margin-top: 32px; }
.related-section__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }

.related-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.related-scroll::-webkit-scrollbar { display: none; }

.related-card {
    flex-shrink: 0;
    width: 140px;
    text-decoration: none;
    color: var(--text);
}

.related-card__image {
    width: 140px;
    height: 187px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    margin-bottom: 8px;
}
.related-card__image img { width: 100%; height: 100%; object-fit: cover; }

.related-card__title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-card__price { font-size: 0.85rem; font-weight: 700; color: var(--primary); }

/* === Size Selector === */
.size-selector { margin-bottom: 16px; }
.size-selector__label { font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }

.size-selector__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-option {
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}
.size-option:active { transform: scale(0.95); }

.size-option--active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.size-option--disabled {
    opacity: 0.35;
    text-decoration: line-through;
    pointer-events: none;
}

.size-selector__error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* === Contact Methods === */
.contact-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-method {
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}
.contact-method:active { transform: scale(0.95); }
.contact-method--active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* === Cart === */
.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.cart-item__image {
    width: 72px;
    height: 96px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--border);
}
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.cart-item__info { flex: 1; }
.cart-item__title { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.cart-item__size { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 2px; }
.cart-item__price { color: var(--primary); font-weight: 600; margin-bottom: 8px; }

.cart-item__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-item__qty { font-weight: 600; min-width: 24px; text-align: center; }

.cart-stock-warning {
    background: #fff8e1;
    color: #f57f17;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.cart-footer { margin-top: 20px; }
.cart-total { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; text-align: right; }

/* === Checkout === */
.checkout-form { max-width: 400px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--surface);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--primary);
}
.form-group small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 0.8rem; }
.form-group small a { color: var(--primary); }

.checkout-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 16px;
}
.checkout-item { padding: 4px 0; color: var(--text-secondary); }
.checkout-total { font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.error-msg {
    background: #ffebee;
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* === Thank You === */
.thankyou { text-align: center; padding-top: 60px; }
.thankyou h1 { font-size: 1.5rem; margin-bottom: 12px; }
.thankyou__order-id { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.thankyou p { color: var(--text-secondary); margin-bottom: 24px; }

/* === Empty State === */
.empty-state { text-align: center; padding: 40px 0; color: var(--text-secondary); }
.empty-state .btn { margin-top: 16px; }

/* === Login === */
.login-page {
    max-width: 320px;
    margin: 80px auto 0;
    text-align: center;
}
.login-page h1 { margin-bottom: 20px; }
.login-form { text-align: left; }

/* === Admin === */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-header h1 { font-size: 1.3rem; }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stat-card__value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.stat-card__label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

.admin-nav { display: flex; flex-direction: column; gap: 12px; }

/* Admin list */
.admin-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.admin-list__image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--border);
}
.admin-list__image img { width: 100%; height: 100%; object-fit: cover; }

.admin-list__info { flex: 1; min-width: 0; }
.admin-list__title { font-weight: 600; font-size: 0.95rem; }
.admin-list__price { color: var(--primary); font-weight: 600; font-size: 0.9rem; }

.admin-list__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge--green { background: #e8f5e9; color: #2e7d32; }
.badge--gray { background: #f5f5f5; color: #757575; }
.badge--yellow { background: #fff8e1; color: #f57f17; }
.badge--blue { background: #e3f2fd; color: #1565c0; }
.badge--red { background: #ffebee; color: #c62828; }

/* Photo grid */
.photo-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-grid__item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid__delete {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orders filter */
.orders-filter { margin-bottom: 16px; }
.orders-filter__form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.orders-filter__form select,
.orders-filter__form input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface);
}

/* Orders */
.orders-list { display: flex; flex-direction: column; gap: 16px; }

.order-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.order-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.order-card__id { font-weight: 700; font-size: 1.1rem; }
.order-card__customer { margin-bottom: 10px; }
.order-card__customer a { color: var(--primary); }
.order-card__items { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 8px; }
.order-card__total { font-weight: 700; margin-bottom: 6px; }
.order-card__date { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }

.order-card__status-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.order-card__status-form select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface);
}

/* Product form */
.product-form { max-width: 400px; }
.product-form textarea { resize: vertical; }

/* Checkbox row */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 10px;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* Stock grid */
.stock-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.stock-grid__row { display: flex; align-items: center; gap: 8px; }
.stock-grid__size { width: 80px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; text-align: center; }
.stock-grid__input { width: 80px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; }
.stock-grid__remove { width: 28px; height: 28px; border: none; background: none; color: var(--danger); font-size: 1.2rem; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.stock-grid__remove:hover { background: #ffebee; }
.stock-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Stats page */
.stats-filter { margin-bottom: 16px; }
.stats-filter__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stats-filter__row input[type="date"] {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.9rem; background: var(--surface);
}
.stats-section-title { font-size: 1.1rem; font-weight: 700; margin: 20px 0 8px; }
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stats-table th, .stats-table td {
    padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.stats-table th { font-weight: 600; background: var(--bg); }
.stats-table__zero td { color: var(--danger); background: #fff5f5; }

/* === Site Footer (fixed bottom bar) === */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 8px 0;
}
.site-footer__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.site-footer__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer__item:active { transform: scale(0.9); }
.site-footer__item svg { color: var(--primary); }

/* === Settings Form === */
.settings-form { max-width: 400px; }
.settings-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.settings-label-row label { margin-bottom: 0; }
.hint-toggle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--text-secondary);
    background: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.hint-toggle:hover { border-color: var(--primary); color: var(--primary); }
.hint-text {
    margin-top: 4px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* === Desktop === */
@media (min-width: 640px) {
    .container { max-width: 600px; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}