/* blueShop visual polish layer. Presentation-only overrides for a quieter,
   more deliberate visual language across storefront and private panels. */

:root {
    --polish-ink: #172033;
    --polish-muted: #64748b;
    --polish-line: rgb(148 163 184 / 18%);
    --polish-soft: #f6f8fc;
    --polish-shadow: 0 18px 46px rgb(15 23 42 / 7%);
    --polish-shadow-hover: 0 20px 42px rgb(15 23 42 / 12%);
}

html { text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; }
a, button, input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--theme-primary, #2563eb) 28%, transparent); outline-offset: 2px; }

/* Public storefront */
.storefront { background: linear-gradient(180deg, #fbfcfe 0%, var(--theme-surface, #f8fafc) 42%, #f3f6fb 100%); }
.store-header { border-bottom-color: rgb(148 163 184 / 15%); background: rgb(255 255 255 / 90%); box-shadow: 0 8px 24px rgb(15 23 42 / 3%); }
.store-header-inner { width: min(1180px, calc(100% - 48px)); min-height: 78px; }
.store-brand { gap: 12px; }
.store-brand-mark { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-primary) 22%, transparent); }
.store-brand strong { letter-spacing: -.025em; }
.store-nav { gap: 8px; }
.store-nav a { position: relative; padding: 9px 11px; border-radius: 10px; color: color-mix(in srgb, var(--theme-text, #172033) 82%, var(--theme-primary)); font-weight: 500; }
.store-nav a::after { position: absolute; right: 11px; bottom: 4px; left: 11px; height: 2px; content: ""; border-radius: 99px; background: var(--theme-primary); opacity: 0; transform: scaleX(.35); transition: opacity .18s ease, transform .18s ease; }
.store-nav a:hover { color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 6%, transparent); }
.store-nav a:hover::after { opacity: .8; transform: scaleX(1); }
.store-cart-link { box-shadow: 0 7px 18px rgb(15 23 42 / 11%); }
.store-cart-link:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgb(15 23 42 / 15%); }
.store-notification-link { display: inline-flex; align-items: center; gap: 7px; }
.store-notification-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; color: #fff; border-radius: 999px; background: var(--theme-accent, #2563eb); font-size: .72rem; font-weight: 800; line-height: 1; }
.store-main { width: min(1180px, calc(100% - 48px)); padding-top: 42px; }
.store-footer { width: min(1180px, calc(100% - 48px)); padding-top: 32px; }
.store-messages { width: min(100% - 48px, 1180px); }
.store-order-status-link { width: min(100% - 48px, 1180px); margin-top: 16px; }
.store-order-status-link a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; }
.store-order-status-link a:hover { background: color-mix(in srgb, var(--theme-primary) 7%, transparent); }
.store-app-embeds { width: min(100% - 48px, 1180px); margin: 0 auto; }
.store-app-embed { box-shadow: 0 7px 20px rgb(15 23 42 / 4%); }

.hero { border: 1px solid rgb(255 255 255 / 28%); box-shadow: 0 28px 68px rgb(15 23 42 / 14%); }
.hero h1 { letter-spacing: -.055em; text-wrap: balance; }
.hero-lead { text-wrap: pretty; }
.hero-actions .button { min-height: 44px; }
.button { box-shadow: 0 8px 18px rgb(15 23 42 / 9%); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgb(15 23 42 / 13%); }
.button-ghost { box-shadow: none; }
.hero-media-frame { box-shadow: 0 26px 56px rgb(2 6 23 / 20%); }
.hero-controls-arrows button { backdrop-filter: blur(10px); }

.featured-section { margin-top: 64px; }
.section-heading { margin-bottom: 22px; }
.section-heading h2 { letter-spacing: -.025em; }
.section-heading .text-link { padding: 7px 10px; border-radius: 9px; }
.section-heading .text-link:hover { background: color-mix(in srgb, var(--theme-primary) 7%, transparent); }
.product-grid { gap: 20px; }
.product-card { border-color: rgb(148 163 184 / 16%); box-shadow: 0 8px 24px rgb(15 23 42 / 4%); }
.product-card:hover { border-color: color-mix(in srgb, var(--theme-primary) 28%, transparent); box-shadow: var(--polish-shadow-hover); }
.product-card-image { background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 74%, white), var(--theme-secondary)); }
.product-card-body { padding: 17px; }
.product-card h2, .product-card h3 { letter-spacing: -.015em; }
.product-card-footer { margin-top: 20px; }
.product-card .icon-link { width: 36px; height: 36px; font-size: 1.55rem; font-weight: 900; line-height: 1; box-shadow: 0 7px 16px rgb(15 23 42 / 14%); }

.product-card-mode-image .product-card-image img { position: relative; z-index: 0; filter: none; transform: scale(1.03); }
.product-card-mode-image .product-card-image::before { position: absolute; z-index: 1; top: 40%; right: 0; bottom: 0; left: 0; height: auto; content: ""; pointer-events: none; background: rgb(2 6 23 / 9%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 24%, #000 43%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 72%) 24%, #000 43%, #000 100%); }
.product-card-mode-image .product-card-image::after { z-index: 2; }
.product-card-mode-image .product-card-body { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 50%; min-height: 50%; padding: 32px 20px 18px; overflow: hidden; }
.product-card-mode-image .product-card-body h2 { display: -webkit-box; margin: 6px 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-mode-image .product-card-footer { flex: 0 0 auto; margin-top: 8px; }
.product-card-mode-image:hover .product-card-image img { transform: scale(1.08); }

.catalog-toolbar { margin-bottom: 34px; }
.catalog-toolbar h1 { letter-spacing: -.04em; }
.search-box { padding: 6px; border: 1px solid rgb(148 163 184 / 17%); border-radius: 14px; background: rgb(255 255 255 / 76%); box-shadow: 0 8px 22px rgb(15 23 42 / 4%); }
.search-box input { border-color: transparent; background: transparent; }
.search-box input:focus { border-color: color-mix(in srgb, var(--theme-primary) 35%, transparent); background: white; }
.search-box button { border-radius: 10px; box-shadow: none; }
.content-section, .public-section { border-color: rgb(148 163 184 / 16%); box-shadow: 0 8px 24px rgb(15 23 42 / 3%); }

.product-detail-grid { gap: clamp(28px, 5vw, 64px); }
.product-detail-main { box-shadow: 0 22px 52px rgb(15 23 42 / 12%); }
.product-detail-copy { padding: 14px 0; }
.product-detail-copy h1 { letter-spacing: -.045em; }
.variant-row, .cart-item, .checkout-items, .checkout-form, .cart-summary, .invoice-card { box-shadow: 0 8px 24px rgb(15 23 42 / 4%); }
.cart-item, .variant-row { border-color: rgb(148 163 184 / 17%); }

/* Merchant and SaaS panels */
.saas-body { background: linear-gradient(135deg, #f7f9fc 0%, #f1f5fb 100%); color: var(--polish-ink); }
.saas-sidebar { box-shadow: 10px 0 34px rgb(15 23 42 / 8%); }
.saas-brand-mark { box-shadow: 0 9px 20px rgb(37 99 235 / 24%); }
.saas-nav a { border: 1px solid transparent; }
.saas-nav a:hover, .saas-nav a.is-active { border-color: rgb(147 197 253 / 15%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%); }
.saas-main { padding-top: 36px; }
.saas-topbar { align-items: center; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid rgb(148 163 184 / 13%); }
.saas-topbar h1 { letter-spacing: -.035em; }
.saas-userbox { box-shadow: 0 8px 22px rgb(15 23 42 / 5%); }
.panel-card, .metric-card { border-color: rgb(148 163 184 / 17%); box-shadow: var(--polish-shadow); }
.panel-card:hover { border-color: rgb(96 165 250 / 24%); }
.panel-header { margin-bottom: 21px; }
.panel-header h2 { letter-spacing: -.02em; }
.metric-card { overflow: hidden; }
.metric-card strong { letter-spacing: -.035em; }
.table-wrap { border: 1px solid rgb(148 163 184 / 12%); border-radius: 12px; }
table th { background: #f8fafc; }
table th, table td { padding: 14px 12px; }
table tbody tr { transition: background-color .18s ease; }
table tbody tr:hover { background: #f8fbff; }
.primary-button, .secondary-button { min-height: 40px; border-radius: 10px; box-shadow: 0 7px 16px rgb(37 99 235 / 12%); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgb(37 99 235 / 17%); }
.secondary-button { color: var(--saas-ink); border: 1px solid var(--saas-line); background: #fff; box-shadow: none; }
.secondary-button:hover { border-color: #93c5fd; background: #f8fbff; }
.search-form input, .form-field input, .form-field select, .form-field textarea, .login-form input { border-color: rgb(148 163 184 / 28%); background: #fbfcfe; }
.search-form input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus, .login-form input:focus { border-color: #60a5fa; background: #fff; box-shadow: 0 0 0 4px rgb(59 130 246 / 10%); }
.flash { box-shadow: 0 8px 20px rgb(22 101 52 / 7%); }
.info-banner { box-shadow: 0 10px 25px rgb(37 99 235 / 6%); }
.merchant-store-card, .quick-action, .builder-section-card, .media-asset-card { box-shadow: 0 7px 20px rgb(15 23 42 / 3%); }
.merchant-store-card:hover, .quick-action:hover { box-shadow: 0 15px 30px rgb(37 99 235 / 10%); transform: translateY(-2px); }
.builder-preview-stage { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 50%); }

.saas-login-body { background: radial-gradient(circle at 12% 12%, rgb(147 197 253 / 35%), transparent 34%), linear-gradient(145deg, #f8fafc, #eef4fb); }
.login-card { border-color: rgb(148 163 184 / 18%); box-shadow: 0 30px 80px rgb(15 23 42 / 12%); }
.login-card h1 { letter-spacing: -.035em; }

@media (max-width: 780px) {
    .store-header-inner, .store-main, .store-footer { width: min(100% - 28px, 1180px); }
    .store-main { padding-top: 26px; }
    .store-nav a { padding: 8px 9px; }
    .saas-main { padding-top: 24px; }
    .saas-topbar { padding-bottom: 18px; }
    .panel-card { box-shadow: 0 12px 30px rgb(15 23 42 / 5%); }
}

@media (max-width: 520px) {
    .store-header-inner { min-height: 68px; }
    .store-brand-mark { width: 38px; height: 38px; }
    .store-main, .store-footer { width: min(100% - 24px, 1180px); }
    .store-messages, .store-order-status-link, .store-app-embeds { width: min(100% - 24px, 1180px); }
    .featured-section { margin-top: 42px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .catalog-toolbar { align-items: stretch; }
    .search-box { width: 100%; }
    .login-card { padding: 26px 20px; border-radius: 16px; }
}

@media (max-width: 650px) {
    .product-card-mode-image .product-card-body { height: 50%; min-height: 50%; padding: 22px 13px 12px; }
    .product-card-mode-image .product-card-body h2 { margin: 4px 0; -webkit-line-clamp: 2; }
}