/* Parseh System — verified responsive, accessibility and print layer */

:root {
  --muted-light: #667085;
  --success: #08795a;
  --warning: #975900;
}

.account-user em { color: var(--warning); }

.switch-row input:focus-visible + i,
.notification-channel input:focus-visible + i,
.invoice-toggle input:focus-visible + i,
.variant-options input:focus-visible + span,
.color-options input:focus-visible + span,
.address-choice input:focus-visible + .address-radio,
.delivery-option input:focus-visible + .delivery-icon,
.payment-option input:focus-visible + .payment-icon,
.use-case-grid input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 3px;
}

.field-icon button {
  inset-inline-start: auto;
  inset-inline-end: 8px;
}

.field-icon:has(button) input {
  padding-inline-start: 42px;
  padding-inline-end: 48px;
}

.account-section .account-content small { font-size: .72rem; line-height: 1.8; }
.account-section .account-content p,
.account-section .account-content dt,
.account-section .account-content dd { line-height: 1.85; }
.account-menu nav > a { font-size: .76rem; }
.responsive-table th { font-size: .7rem; }
.responsive-table td { font-size: .74rem; }
.invoice-page .invoice-sheet :where(p, small, dt, dd, th, td) {
  font-size: .7rem;
  line-height: 1.7;
}

.ticket-conversation {
  display: grid;
  gap: 18px;
  margin-top: 15px;
  scroll-margin-top: 140px;
}

.ticket-thread { display: grid; gap: 10px; }
.ticket-message { max-width: min(88%, 680px); padding: 13px 15px; border-radius: 14px; background: var(--surface-soft); }
.ticket-message.is-support { margin-inline-start: auto; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--primary-faint); }
.ticket-message header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.ticket-message strong { font-size: .78rem; }
.ticket-message time { color: var(--muted); font-size: .68rem; }
.ticket-message p { margin: 0; color: var(--ink-soft); }
.ticket-reply { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.ticket-reply textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--ink); background: var(--surface-soft); resize: vertical; }
.ticket-reply .btn { justify-self: end; }

@media (max-width: 1180px) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .product-layout .purchase-card {
    position: static;
    grid-column: 1 / -1;
  }

  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero-grid { gap: 35px; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .about-hero-grid,
  .process-grid,
  .contact-layout,
  .faq-layout,
  .auth-shell,
  .catalog-layout,
  .cart-layout,
  .checkout-layout,
  .builder-layout,
  .account-shell,
  .account-grid-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-visual {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .process-grid > div:first-child,
  .faq-nav,
  .order-summary,
  .checkout-summary,
  .builder-summary,
  .account-sidebar {
    position: static;
  }

  .value-grid,
  .contact-channels,
  .mini-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-nav {
    display: flex;
    overflow-x: auto;
  }

  .faq-nav a { flex: 0 0 auto; }

  .auth-aside { min-height: 340px; }

  .builder-hero-inner {
    min-height: 660px;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 60px;
    text-align: center;
  }

  .builder-hero p { margin-inline: auto; }
  .builder-hero ul { justify-items: center; }
  .builder-hero-visual { width: 290px; height: 290px; }

  .filter-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
    width: min(88vw, 360px);
    max-height: none;
    overflow-y: auto;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transform: translateX(105%);
    transition: transform .25s var(--ease);
  }

  .filter-panel.is-open { transform: translateX(0); }
  .mobile-filter-button { display: inline-flex; }
  .filter-close { display: grid; }

  .filter-apply {
    display: flex;
    width: calc(100% - 2rem);
    margin: 1rem;
  }

  .filter-overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 119;
    background: rgba(5, 14, 30, .56);
    backdrop-filter: blur(4px);
  }

  .account-mobile-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
  }

  .account-mobile-toggle > span {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-align: start;
  }

  .account-mobile-toggle > span > span:last-child { display: grid; }
  .account-mobile-toggle small { color: var(--muted); font-size: .62rem; }
  .account-mobile-toggle > i { transition: transform .25s var(--ease); }
  .account-sidebar.is-open .account-mobile-toggle > i { transform: rotate(180deg); }
  .account-sidebar .account-menu { display: none; }
  .account-sidebar.is-open .account-menu { display: grid; }

  .settings-layout { grid-template-columns: minmax(0, 1fr); }

  .settings-nav {
    display: flex;
    overflow-x: auto;
    padding-block-end: .35rem;
  }

  .settings-nav button { flex: 0 0 auto; }
  .invoice-sheet { padding: 32px; }
}

@media (max-width: 760px) {
  .page-hero-inner { min-height: 220px; }
  .page-hero-art { display: none; }
  .page-hero h1 { font-size: clamp(1.85rem, 8vw, 2.45rem); }

  .form-grid,
  .address-choice-grid,
  .order-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-layout,
  .review-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-gallery,
  .purchase-card { position: static; }
  .gallery-main { min-height: 360px; }
  .tabs { inset-block-start: 72px; }
  .feature-bento { grid-template-columns: minmax(0, 1fr); }
  .spec-group dl > div { grid-template-columns: 190px minmax(0, 1fr); }

  .cart-item { grid-template-columns: 110px minmax(0, 1fr); }
  .cart-item-media { min-height: 120px; font-size: 3rem; }
  .cart-item-bottom { flex-wrap: wrap; }

  .mobile-buy-bar,
  .mobile-cart-total {
    display: flex;
    position: fixed;
    inset-inline: .75rem;
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    z-index: 92;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
  }

  .checkout-progress,
  .checkout-steps,
  .builder-progress {
    overflow-x: auto;
    padding-block: 8px;
  }

  .checkout-progress > div,
  .checkout-steps > div,
  .builder-progress > button {
    min-width: 90px;
  }

  .component-list article {
    grid-template-columns: 55px minmax(0, 1fr) auto;
  }

  .component-list .btn {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .page-title-row,
  .account-page-head,
  .account-welcome,
  .account-card-head,
  .invoice-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-title-actions,
  .invoice-toolbar > div { flex-wrap: wrap; }

  .order-filters form { grid-template-columns: minmax(0, 1fr); }

  .order-card > header,
  .order-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-card > header > div:last-child { justify-items: start; }
  .order-card-body { grid-template-columns: minmax(0, 1fr); }
  .order-card > footer > div { flex-wrap: wrap; }

  .order-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .order-timeline li {
    grid-template-columns: 42px minmax(0, 1fr);
    justify-items: start;
    text-align: start;
  }

  .order-timeline li::before {
    inset-block-start: -18px;
    inset-inline-start: 20px;
    width: 2px;
    height: 18px;
  }

  .order-timeline li > div { align-self: center; }
  .order-detail-line { grid-template-columns: 62px minmax(0, 1fr); }
  .order-detail-line > strong { grid-column: 2; }

  .address-grid { grid-template-columns: minmax(0, 1fr); }
  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-panel { padding: 18px; }
  .settings-panel .form-actions { margin: 20px -18px -18px; }

  .support-summary { grid-template-columns: minmax(0, 1fr); }

  .wallet-hero {
    min-height: 260px;
    align-items: flex-start;
    flex-direction: column;
  }

  .review-account-list article { grid-template-columns: 74px minmax(0, 1fr) auto; }

  .invoice-sheet { padding: 24px; }
  .invoice-head { flex-direction: column; }
  .invoice-head > div:last-child { text-align: right; }
  .invoice-parties,
  .invoice-summary,
  .invoice-footer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .value-grid,
  .contact-channels,
  .mini-faq-grid,
  .catalog-grid,
  .wishlist-grid,
  .related-section .product-grid,
  .use-case-grid,
  .swatch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-visual { min-height: 340px; transform: scale(.82); }
  .about-mini-1 { inset-inline-start: -20px; }
  .about-mini-2 { inset-inline-end: -20px; }

  .cta-card { grid-template-columns: auto minmax(0, 1fr); }
  .cta-card .btn { grid-column: 1 / -1; width: 100%; }

  .catalog-toolbar,
  .catalog-toolbar-start,
  .catalog-toolbar-end,
  .form-actions,
  .checkout-navigation,
  .builder-navigation {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-toolbar-end,
  .sort-select,
  .form-actions > *,
  .checkout-navigation > *,
  .builder-navigation > * { width: 100%; }

  .sort-select select { flex: 1; }

  .catalog-grid.is-list .product-card { grid-template-columns: minmax(0, 1fr); }
  .catalog-grid.is-list .product-media { min-height: 250px; }

  .gallery-main { min-height: 290px; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .key-specs dl { grid-template-columns: minmax(0, 1fr); }
  .spec-group dl > div { grid-template-columns: minmax(0, 1fr); }
  .spec-group dt { min-height: 40px; }

  .purchase-card,
  .order-summary,
  .checkout-panel,
  .checkout-summary,
  .builder-content,
  .builder-summary,
  .account-card,
  .invoice-sheet { padding: 1rem; border-radius: var(--radius); }

  .cart-item { grid-template-columns: 72px minmax(0, 1fr); padding: .85rem; }
  .cart-item-media { min-height: 82px; font-size: 2.25rem; }
  .cart-item-heading { gap: 8px; }
  .cart-attributes { gap: 7px; }

  .delivery-option,
  .payment-option { grid-template-columns: auto minmax(0, 1fr); }
  .delivery-option > b,
  .payment-option > i { grid-column: 2; justify-self: start; }
  .checkout-success > div { width: 100%; flex-direction: column; }
  .checkout-success .btn { width: 100%; }

  .component-list article { grid-template-columns: 46px minmax(0, 1fr); }
  .component-list article > strong,
  .component-list .btn { grid-column: 2; justify-self: start; }

  .account-stats { grid-template-columns: minmax(0, 1fr); }
  .responsive-table table { min-width: 620px; }
  .order-card-body dl { grid-template-columns: minmax(0, 1fr); }
  .order-help { grid-template-columns: auto minmax(0, 1fr); }
  .order-help .btn { grid-column: 2; width: 100%; }

  .profile-avatar-row,
  .settings-panel-head { align-items: flex-start; flex-wrap: wrap; }
  .profile-avatar-row .btn { width: 100%; margin-inline-start: 0; }

  .notification-list > article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-list > article > .notification-channel {
    grid-column: 2;
    justify-self: start;
  }

  .privacy-actions article,
  .preference-list > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-actions article > .btn,
  .preference-list > div > :last-child {
    grid-column: 2;
    width: 100%;
  }

  .two-factor { grid-template-columns: auto minmax(0, 1fr); }
  .two-factor .switch-row { grid-column: 2; }

  .ticket-list > article { grid-template-columns: auto minmax(0, 1fr); }
  .ticket-list > article > i { grid-column: 2; }
  .wallet-help { grid-template-columns: auto minmax(0, 1fr); }
  .wallet-help .btn { grid-column: 2; width: 100%; }

  .review-account-list article { grid-template-columns: 70px minmax(0, 1fr); }
  .review-account-list article > .btn { grid-column: 2; justify-self: start; }

  .auth-main { padding-block-start: 16px; }
  .auth-shell { border-radius: var(--radius-lg); }
  .auth-aside { min-height: 250px; padding: 25px; }
  .auth-aside ul { display: none; }
  .auth-card { padding: 22px 16px; }

  .invoice-toolbar > div,
  .invoice-toolbar .btn { width: 100%; }
  .invoice-table { min-width: 640px; }
  .invoice-parties dl > div { grid-template-columns: 85px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  @page { size: A4; margin: 12mm; }

  :root {
    --ink: #101828;
    --ink-soft: #344054;
    --muted: #667085;
    --muted-light: #667085;
    --surface: #fff;
    --surface-raised: #fff;
    --surface-soft: #f7f9fc;
    --page: #fff;
    --border: #d8dee8;
    --border-strong: #b9c3d2;
    --success: #08795a;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    color: #101828 !important;
    background: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .announcement,
  .site-header,
  .site-footer,
  .mobile-bottom-nav,
  .back-to-top,
  .mobile-buy-bar,
  .mobile-cart-total,
  .account-sidebar,
  .account-mobile-toggle,
  .account-page-head,
  .invoice-toolbar,
  .toast-region,
  dialog {
    display: none !important;
  }

  main,
  .section-pad,
  .account-section,
  .account-shell,
  .account-content,
  .invoice-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .invoice-sheet,
  .account-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #101828 !important;
    background: #fff !important;
  }

  .invoice-head {
    flex-direction: row;
    color: #101828;
  }

  .invoice-head > div:last-child { text-align: left; }
  .invoice-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-summary { grid-template-columns: minmax(0, 1fr) 280px; }
  .invoice-footer { grid-template-columns: minmax(0, 1fr) auto; }
  .invoice-table-wrap { overflow: visible; }

  .invoice-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .invoice-table thead,
  table thead { display: table-header-group; }

  tr,
  img,
  .invoice-summary,
  .invoice-parties,
  .invoice-footer { break-inside: avoid; }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

.priority-fieldset input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 3px;
}

.address-choice:has(input:focus-visible),
.delivery-option:has(input:focus-visible),
.payment-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 3px;
}

.newsletter-form:focus-within,
.search-form:focus-within,
.faq-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.sort-select select:focus-visible,
.coupon-form input:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.compatibility-banner.is-over-budget {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: var(--danger-soft);
}

.compatibility-banner.is-over-budget > i { color: var(--danger); }
.checkout-empty-note { margin: 0; color: var(--muted); font-size: .7rem; }

@media print {
  :root {
    --primary: #155eef;
    --primary-strong: #004eeb;
    --primary-soft: #eff4ff;
    --primary-faint: #f5f8ff;
    --accent: #7f56d9;
    --accent-soft: #f4f0ff;
    --success: #08795a;
    --success-soft: #ecfdf3;
    --danger: #d92d20;
    --danger-soft: #fef3f2;
    --warning: #b54708;
    --warning-soft: #fffaeb;
  }

  .invoice-sheet :where(p, small, dt, dd, th, td) {
    font-size: 9pt !important;
    line-height: 1.6;
  }

  .account-page-head {
    display: flex !important;
    margin-bottom: 14px !important;
  }

  .account-page-head .btn,
  .page-title-actions,
  .order-filters,
  .form-actions,
  .order-help .btn,
  .account-card-head > .btn,
  .wallet-hero > .btn {
    display: none !important;
  }

  body[data-page]:not([data-page="invoice"]) .account-card {
    margin-bottom: 10px !important;
    padding: 12px !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 8px !important;
  }

  .order-card,
  .account-card,
  .order-info-grid section {
    break-inside: avoid;
  }
}

.compare-empty-cell {
  padding: clamp(2rem, 7vw, 4.5rem) !important;
  color: var(--muted);
  text-align: center;
}

.compare-empty-cell > i {
  margin-bottom: .75rem;
  color: var(--primary);
  font-size: 2rem;
}

.compare-empty-cell p { margin-bottom: 1rem; }
/* Product gallery dialog */
@media (max-width: 760px) {
  .gallery-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .gallery-dialog-header { min-height: 64px; padding-block: max(9px,env(safe-area-inset-top)) 9px; padding-inline: 13px; }
  .gallery-dialog-title span { display: none; }
  .gallery-dialog-title h2 { font-size: .82rem; }
  .gallery-dialog-counter { min-width: auto; padding-inline: 8px; }
  .gallery-dialog-stage,
  .gallery-dialog-visual { min-height: 0; }
  .gallery-dialog-visual i { font-size: clamp(8rem,42vw,12rem); }
  .gallery-dialog-nav { inset-block-start: auto; inset-block-end: 14px; width: 48px; height: 48px; transform: none; }
  .gallery-dialog-nav:hover { transform: scale(1.04); }
  .gallery-dialog-prev { inset-inline-start: calc(50% - 56px); }
  .gallery-dialog-next { inset-inline-end: calc(50% - 56px); }
  .gallery-dialog-footer { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 11px 13px max(11px,env(safe-area-inset-bottom)); }
  .gallery-dialog-meta { text-align: center; }
  .gallery-dialog-meta span { display: none; }
  .gallery-dialog-thumbs { width: 100%; justify-content: flex-start; }
  .gallery-dialog-thumb { width: 64px; min-width: 64px; min-height: 54px; }
}