/*
 * Maran UI polish layer
 * Loaded after the legacy storefront/admin/POS styles. It provides shared
 * spacing, interactive states, forms, tables and responsive safeguards.
 */
:root {
    --ui-space-1: .375rem;
    --ui-space-2: .625rem;
    --ui-space-3: 1rem;
    --ui-space-4: 1.5rem;
    --ui-space-5: 2.25rem;
    --ui-radius-sm: .375rem;
    --ui-radius: .625rem;
    --ui-radius-lg: .875rem;
    --ui-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    --ui-shadow-hover: 0 18px 38px rgba(0, 0, 0, .26);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* Storefront shell, header and footer */
.storefront-shell { overflow-x: clip; }
.storefront-header { box-shadow: 0 1px 0 rgba(219, 168, 74, .08); }
.storefront-header__inner { min-height: 4.5rem; }
.storefront-nav a { position: relative; padding-block: .5rem; letter-spacing: .025em; }
.storefront-nav a::after { position: absolute; right: 0; bottom: .1rem; left: 0; height: 1px; content: ''; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.storefront-nav a:hover::after, .storefront-nav a.text-gold::after { transform: scaleX(1); transform-origin: left; }
.storefront-actions > a, .storefront-actions > button { border-radius: var(--ui-radius-sm); }
.storefront-mobile-nav { box-shadow: 0 14px 24px rgba(0, 0, 0, .18); }
.storefront-mobile-nav a { padding: .5rem .25rem; }
.storefront-footer { margin-top: clamp(4rem, 8vw, 7rem); }
.storefront-footer h3 { letter-spacing: .12em; }
.storefront-footer a { transition: color .18s ease; }
.storefront-footer__legal { letter-spacing: .025em; }

/* Reusable storefront cards and product presentation */
.product-card, .card-luxury { border-radius: var(--ui-radius); box-shadow: 0 1px 0 rgba(255,255,255,.025); overflow: hidden; }
.product-card { border-color: rgba(74, 62, 42, .82); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-hover); }
.product-card .product-img { background: var(--secondary); }
.product-card .product-img img { transition: transform .45s ease; }
.product-card:hover .product-img img { transform: scale(1.035); }
.product-card .product-info { padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-4); }
.product-card .product-name { line-height: 1.3; }
.product-card .product-price .price { font-size: 1rem; }
.product-card .product-badge, .badge { border-radius: .25rem; font-weight: 600; letter-spacing: .035em; }
.shop-toolbar, .cart-summary, .checkout-summary { border-radius: var(--ui-radius); }
.cart-table { overflow-x: auto; border-radius: var(--ui-radius); -webkit-overflow-scrolling: touch; }
.cart-table td { padding: clamp(.875rem, 2vw, 1.25rem); }
.cart-summary { position: sticky; top: 6rem; box-shadow: var(--ui-shadow); }

/* Shared forms, buttons, notices and empty states */
.btn, .btn-gold, .auth-submit { min-height: 2.5rem; border-radius: var(--ui-radius-sm); font-weight: 600; letter-spacing: .025em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.btn-primary, .btn-gold, .auth-submit { box-shadow: 0 6px 18px rgba(219, 168, 74, .16); }
.btn-primary:hover, .btn-gold:hover, .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(219, 168, 74, .24); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost:hover { background: rgba(219, 168, 74, .08); color: var(--gold); }
.form-group { margin-bottom: var(--ui-space-4); }
.form-label, label { letter-spacing: .015em; }
.form-control, .form-select, .form-textarea, select, textarea { min-height: 2.75rem; border-radius: var(--ui-radius-sm); }
textarea.form-control, textarea { min-height: 6rem; padding-top: .75rem; }
.form-control:focus, .form-select:focus, .form-textarea:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(219, 168, 74, .12); }
.form-error, .is-invalid { border-color: var(--destructive) !important; }
.alert { border-radius: var(--ui-radius-sm); line-height: 1.55; }
.empty-state, .empty-cart, .no-results { padding: clamp(2rem, 6vw, 4rem) var(--ui-space-4); border: 1px dashed var(--border); border-radius: var(--ui-radius); text-align: center; }

/* Compatibility treatment for the standalone recovery screens. */
.auth-page > .auth-card { max-width: 430px; }
.auth-logo { margin-bottom: var(--ui-space-4); text-align: center; }
.auth-logo-img { display: block; width: 68px; height: 68px; margin: 0 auto var(--ui-space-3); object-fit: contain; border: 1px solid rgba(219,168,74,.32); border-radius: 50%; box-shadow: 0 8px 25px rgba(0,0,0,.3); }
.auth-logo h1 { margin: 0; color: var(--foreground); font-family: 'Cormorant Garamond', serif; font-size: 2rem; }
.auth-logo p { margin-top: .4rem; color: var(--muted-foreground); font-size: .875rem; }
.auth-links { margin-top: var(--ui-space-4); padding-top: var(--ui-space-3); border-top: 1px solid var(--border); text-align: center; }
.auth-links a { color: var(--gold); font-size: .875rem; text-decoration: none; }
.auth-links a:hover { color: #F5D075; text-decoration: underline; }

/* Customer pages inherit the storefront language without becoming identical. */
.customer-layout, .account-layout { gap: var(--ui-space-5); }
.customer-sidebar, .account-sidebar { border: 1px solid var(--border); border-radius: var(--ui-radius); background: var(--card); }
.order-card, .address-card { border-radius: var(--ui-radius); transition: border-color .18s ease, transform .18s ease; }
.order-card:hover, .address-card:hover { border-color: rgba(219, 168, 74, .5); transform: translateY(-2px); }

/* Admin: compact, data-first and clearly separate from the storefront. */
.admin-shell { background: var(--background); }
.admin-sidebar { border-right-color: rgba(219, 168, 74, .14); box-shadow: 10px 0 30px rgba(0,0,0,.12); }
.sidebar-section { margin-bottom: var(--ui-space-4); }
.sidebar-section-title { letter-spacing: .13em; }
.sidebar-link { border-radius: var(--ui-radius-sm); margin-inline: .5rem; transition: background .18s ease, color .18s ease, transform .18s ease; }
.sidebar-link:hover { transform: translateX(2px); }
.admin-header { min-height: 4.5rem; border-bottom-color: rgba(219, 168, 74, .14); }
.admin-content { max-width: 1800px; }
.admin-content, .admin-main, .admin-header, .admin-header > div { min-width: 0; }
.stat-card, .card { border-radius: var(--ui-radius); box-shadow: 0 1px 0 rgba(255,255,255,.02); }
.stat-card:hover, .card:hover { box-shadow: var(--ui-shadow); }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--ui-radius); }
.table { min-width: 640px; }
.table th { letter-spacing: .07em; white-space: nowrap; }
.table td { vertical-align: middle; }
.table tr:hover td { background: rgba(219, 168, 74, .035); }
.badge { white-space: nowrap; }

.modal-backdrop { padding: 16px; overflow-y: auto; }
.modal-content { width: min(100%, 560px); max-height: calc(100vh - 32px); overflow-y: auto; }

@media (max-width: 768px) {
    .table-responsive { max-width: 100%; }
    .modal-content { padding: 20px !important; }
    .btn, .btn-sm, button, input, select, textarea { max-width: 100%; }
    .form-grid[style] { grid-template-columns: 1fr !important; }
    .pos-header { min-height: 58px; height: auto; padding-block: 8px; }
    .pos-header-actions { gap: 4px; }
}

@media (max-width: 430px) {
    .storefront-header__inner { min-width: 0; }
    .storefront-header__inner > a { min-width: 0; }
    .storefront-header__inner > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .storefront-mobile-nav a { min-height: 44px; display: flex; align-items: center; }
    .cart-summary { padding: 1rem; }
    .pos-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pos-product-card { min-width: 0; }
}

/* POS keeps its operational density while gaining clearer controls. */
.pos-header { box-shadow: 0 2px 14px rgba(0,0,0,.16); }
.pos-product-card { border-radius: var(--ui-radius-sm); }
.pos-product-card:hover { transform: translateY(-2px); }
.pos-right { box-shadow: -10px 0 30px rgba(0,0,0,.1); }
.pos-search-bar input:focus { box-shadow: 0 0 0 3px rgba(219,168,74,.12); }

@media (max-width: 1024px) {
    .cart-summary { position: static; }
    .admin-content { padding: var(--ui-space-4); }
}
@media (max-width: 768px) {
    .storefront-header__inner { min-height: 4rem; }
    .storefront-footer { margin-top: 4rem; }
    .product-card .product-info { padding: .875rem; }
    .table-responsive { border-inline: 0; border-radius: 0; }
    .admin-header { padding-inline: var(--ui-space-3); }
    .admin-content { padding: var(--ui-space-3); }
    .pos-right { box-shadow: 0 -10px 30px rgba(0,0,0,.1); }
}
@media (max-width: 420px) {
    .storefront-header__inner { padding-inline: .75rem; gap: .5rem; }
    .storefront-actions { gap: 0; }
    .auth-card { padding-inline: 1.125rem; }
    .btn { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Custom display font overrides for the entire project */
.font-display, h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}