@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");
/* =========================================================================
   ITECS storefront — "Liquid Glass v7" (dark blue accent, stronger blur)
   Synthesized from a design team: visual, UX, a11y, frontend-perf.
   CSS-only overlay on OroCommerce "oro" theme via layout external_resource.
   ========================================================================= */
:root {
  /* accent — darker blue (white text 5.27:1 AA) */
  --ac:        #0a4fbf;
  --ac-hover:  #08458c;
  --ac-active: #063a78;
  --ac-fg:     #ffffff;
  --ac-soft:   rgba(10, 79, 191, 0.10);
  --ac-glow:   rgba(10, 79, 191, 0.30);

  /* text (AA on light glass) */
  --ink:   #15202b;
  --muted: #3b4654;

  /* glass */
  --glass:        rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.74);   /* text-heavy panels */
  --glass-solid:  #eef2f8;                       /* @supports fallback */
  --glass-blur:   blur(26px) saturate(180%);
  --glass-blur-lite: blur(14px) saturate(160%);
  --glass-brd:    1px solid rgba(255, 255, 255, 0.6);
  --hair:         1px solid rgba(15, 19, 38, 0.08);

  --r:    16px;
  --r-sm: 11px;
  --sheen:  inset 0 1px 0 rgba(255,255,255,.65);
  --sh-sm: 0 1px 2px rgba(15,19,38,.05), 0 2px 8px rgba(15,19,38,.07);
  --sh-md: 0 6px 18px rgba(15,19,38,.08), 0 18px 40px rgba(15,19,38,.12);
  --sh-lg: 0 10px 24px rgba(15,19,38,.10), 0 30px 64px rgba(15,19,38,.16);
  --ease:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- ambient mesh backdrop (cool/neutral so dark blue pops) ---------- */
body {
  background-color: #eef1f7 !important;
  background-image:
    radial-gradient(60% 55% at 12% 8%,  rgba(10, 79, 191, .16) 0%, transparent 60%),
    radial-gradient(55% 50% at 92% 12%, rgba(56, 98, 210, .14) 0%, transparent 62%),
    radial-gradient(70% 60% at 78% 96%, rgba(80, 70, 180, .12) 0%, transparent 60%),
    radial-gradient(60% 60% at 18% 94%, rgba(20, 110, 160, .10) 0%, transparent 60%),
    linear-gradient(180deg, #f3f5fb 0%, #e9edf6 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
}

/* ---------- typography ---------- */
h1, h2, h3, .page-title, .page-title__text {
  font-family: "Space Grotesk", "Mulish", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -0.02em;
}
.page-title, .customer-page-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1.3rem;
}
.product-price__value, .product-price__main {
  color: var(--ink); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.product-price__value { font-size: 1.22em; }

/* ---------- glass surfaces (fallback solid first, enhance if supported) ---------- */
.page-header,
.page-sidebar .primary-menu-container-inner,
.page-sidebar > .primary-menu-container,
.product-item__box,
.frontend-datagrid__panel,
.dashboard-menu__link,
.customer-info-grid, .tax-result-grid, .notes-widget,
.attribute-group, .checkout-form {
  background: var(--glass-solid);
  border: var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--sh-md), var(--sheen);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-header,
  .page-sidebar .primary-menu-container-inner,
  .page-sidebar > .primary-menu-container,
  .product-item__box,
  .frontend-datagrid__panel,
  .customer-info-grid, .tax-result-grid, .notes-widget,
  .attribute-group, .checkout-form {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    contain: paint;
  }
  .frontend-datagrid__panel, .checkout-form { background: var(--glass-strong); }
}

/* ---------- header: floating frosted bar ---------- */
.page-header {
  position: sticky; top: 0; z-index: 40;
  border-radius: 0 !important;
  border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
  border-bottom: var(--hair) !important;
  box-shadow: var(--sh-sm), var(--sheen);
}
@supports (backdrop-filter: blur(1px)) { .page-header { background: var(--glass-strong); } }

/* ---------- breadcrumbs + links ---------- */
.breadcrumbs__link { color: var(--muted); text-decoration: none; transition: color .15s var(--ease); }
.breadcrumbs__link:hover { color: var(--ac-hover); }
a { transition: color .15s var(--ease); }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease) !important;
}
/* filled primary only (exclude every modifier) — recolor via var + fallback */
.btn:not(.btn--outlined):not(.btn--simple):not(.btn--simple-colored):not(.btn--plain):not(.btn--plain-inverse):not(.btn--flat):not(.btn--neutral):not(.btn--neutral-dark):not(.btn--no-padding):not(.btn--circle) {
  --btn-background: var(--ac);
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-hover) 100%) !important;
  border-color: var(--ac) !important;
  color: var(--ac-fg) !important;
  box-shadow: 0 6px 16px -6px var(--ac-glow);
}
.btn:not(.btn--outlined):not(.btn--simple):not(.btn--simple-colored):not(.btn--plain):not(.btn--plain-inverse):not(.btn--flat):not(.btn--neutral):not(.btn--neutral-dark):not(.btn--no-padding):not(.btn--circle):hover {
  background: linear-gradient(135deg, var(--ac-hover) 0%, var(--ac-active) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px var(--ac-glow);
}
.btn:not(.btn--simple):not(.btn--plain):not(.btn--plain-inverse):not(.btn--no-padding):active { transform: translateY(0); }
/* outlined / text colored -> blue, glassy fill */
.btn--outlined {
  background: rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: var(--glass-blur-lite); backdrop-filter: var(--glass-blur-lite);
  border-color: var(--ac) !important; color: var(--ac-hover) !important;
}
.btn--outlined:hover { background: var(--ac-soft) !important; transform: translateY(-2px); }
.btn--simple-colored, .btn--plain-inverse { color: var(--ac) !important; }

/* ---------- inputs + strong focus ---------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], select, textarea {
  border-radius: var(--r-sm) !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(15,19,38,.14) !important;
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease) !important;
}
.input:focus, input:focus, select:focus, textarea:focus {
  background: #fff !important;
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--ac-glow) !important;
  outline: none !important;
}
:where(a, button, .btn, .input, [tabindex], select, textarea):focus-visible {
  outline: 3px solid var(--ac-hover);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.95);
  border-radius: var(--r-sm);
}

/* ===================== CABINET ===================== */
.page-sidebar .primary-menu-container-inner,
.page-sidebar > .primary-menu-container { padding: 10px; }
.primary-menu.menu-is-plain { display: flex; flex-direction: column; gap: 3px; }
.primary-menu__item { margin: 0 !important; border: 0 !important; background: transparent !important; }
.primary-menu__link {
  position: relative;
  display: block;
  padding: 11px 15px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500;
  color: var(--muted) !important;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.primary-menu__link:hover {
  background: var(--ac-soft) !important;
  color: var(--ac-hover) !important;
  transform: translateX(2px);
}
.primary-menu__item--current > .primary-menu__link, .primary-menu__link--current {
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-hover) 100%) !important;
  color: var(--ac-fg) !important;
  font-weight: 600;
  box-shadow: 0 8px 18px -8px var(--ac-glow), var(--sheen);
}
.primary-menu__item--current > .primary-menu__link::before {
  content: ""; position: absolute; left: -4px; top: 22%; bottom: 22%;
  width: 3px; border-radius: 3px; background: var(--ac);
}

/* account dropdown (top-right) */
.customer-menu-list .dropdown-item {
  border-radius: var(--r-sm) !important; padding: 10px 14px !important;
  font-weight: 600; color: var(--muted) !important;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.customer-menu-list .dropdown-item:hover { background: var(--ac-soft) !important; color: var(--ac-hover) !important; }
.customer-menu-list .dropdown-item--active, .customer-menu-list .dropdown-item.active {
  background: var(--ac) !important; color: #fff !important;
}

/* dashboard quick tiles -> solid blue gradient with lift (white text/icons) */
.dashboard-menu__link {
  background: linear-gradient(140deg, var(--ac) 0%, var(--ac-hover) 100%) !important;
  color: #fff !important;
  border: 1px solid var(--ac) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-md), 0 10px 24px -12px var(--ac-glow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.dashboard-menu__link * { color: #fff !important; }
.dashboard-menu__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), 0 16px 32px -12px var(--ac-glow);
  background: linear-gradient(140deg, var(--ac-hover) 0%, var(--ac-active) 100%) !important;
}

/* ---------- datagrid (no blur on tbody — perf) ---------- */
.frontend-datagrid__panel { padding: 8px 14px; margin-bottom: 16px; overflow: hidden; }
.datagrid-toolbar { border: 0 !important; }
.grid-table, table.grid, .table { border-collapse: separate !important; border-spacing: 0; }
.grid-table thead th, table.grid thead th, .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: var(--hair) !important;
}
.grid-table tbody td, table.grid tbody td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; border-color: rgba(15,19,38,.07) !important; }
.grid-table tbody tr, table.grid tbody tr { transition: background-color .12s var(--ease); }
.grid-table tbody tr:hover, table.grid tbody tr:hover { background: var(--ac-soft) !important; }
[class*="status-label"] { border-radius: 999px !important; padding: 3px 12px !important; font-weight: 700; }

/* ===================== CATALOG / PRODUCT CARDS ===================== */
.product-item__box {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  overflow: hidden;
}
.product-item__box:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg), var(--sheen);
  background: var(--glass-strong) !important;
}
.product-item__image-holder, .product-item__preview {
  border-radius: var(--r-sm); overflow: hidden; background: rgba(255,255,255,.5);
}
.product-item__image-holder img { transition: transform .4s var(--ease); }
.product-item__box:hover .product-item__image-holder img { transform: scale(1.05); }

/* ===================== PRODUCT DETAIL PAGE ===================== */
.product-view-media-container,
.product-view__aside,
.product-view__description,
.product-view__details,
.product-view-line-form-container {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--sh-md), var(--sheen);
  padding: 18px 20px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-view-media-container, .product-view__aside, .product-view__description,
  .product-view__details, .product-view-line-form-container { background: var(--glass-solid); }
}
/* product title */
.product-view__headline .product-view__title, .product-view__headline h1, .product-view__headline-item h1 {
  font-family: "Space Grotesk", "Mulish", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.sku__code { color: var(--muted); font-weight: 700; }
/* gallery image — clean white rounded plate, subtle zoom */
.product-view-media-gallery, .product-view-media-gallery__picture {
  border-radius: var(--r-sm); overflow: hidden; background: #fff;
}
.product-view-media-gallery__image { transition: transform .4s var(--ease); }
.product-view-media-container:hover .product-view-media-gallery__image { transform: scale(1.03); }
/* price block emphasis */
.product-view__aside .product-price__value, .product-view .product-price__value { font-size: 1.5em; }
/* qty/price tiers table */
.product-prices-table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
.product-prices-table__th {
  background: rgba(255,255,255,.6); color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: var(--hair) !important;
}
.product-prices-table__td { border-color: rgba(15,19,38,.06) !important; }
.product-prices-table__tr:hover .product-prices-table__td { background: var(--ac-soft); }

/* ===================== OVERLAYS — fix flat "white windows" ===================== */
.dropdown-menu,
.shopping-list-dropdown,
.customer-menu__dropdown,
.select2-dropdown, .select2-container--open .select2-dropdown,
.ui-autocomplete,
.popover,
.ui-dialog, .ui-dialog.ui-widget-content,
.widget-content,
.modal-content,
.fullscreen-popup-view {
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-lg) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dropdown-menu, .shopping-list-dropdown, .customer-menu__dropdown, .select2-dropdown,
  .ui-autocomplete, .popover, .ui-dialog, .widget-content, .modal-content, .fullscreen-popup-view {
    background: #fff !important;
  }
}
.dropdown-menu .dropdown-item, .dropdown-menu li > a {
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu li > a:hover {
  background: var(--ac-soft) !important; color: var(--ac-hover) !important;
}
.ui-dialog .ui-dialog-titlebar, .modal-header { border-bottom: var(--hair) !important; background: transparent !important; }
.ui-dialog .ui-dialog-buttonpane, .modal-footer { border-top: var(--hair) !important; background: transparent !important; }
.ui-widget-overlay, .modal-backdrop {
  background: rgba(12, 22, 38, .45) !important;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* ===================== CHECKOUT (discrete glass cards, no nesting) ===================== */
.checkout-form, .checkout-order-summary-container, .checkout-navigation, .totals-container,
.shopping-list-datagrid-container, .shopping-list-totals {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--sh-md), var(--sheen);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .checkout-form, .checkout-order-summary-container, .checkout-navigation, .totals-container,
  .shopping-list-datagrid-container, .shopping-list-totals { background: var(--glass-solid); }
}
.checkout-form, .checkout-order-summary-container { padding: 18px 20px; }
.checkout-navigation { padding: 12px; }
.checkout-navigation__step--current .checkout-navigation__title { color: var(--ac-hover) !important; font-weight: 700; }
.checkout-navigation__icon--current {
  background: var(--ac) !important; color: #fff !important; border-color: var(--ac) !important;
}
.totals .grand-total, .totals-container .grand-total, [class*="grand-total"] {
  color: var(--ink); font-weight: 800;
}

/* ---------- misc ---------- */
::selection { background: var(--ac); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, .btn, .product-item__box, .product-item__image-holder img, a, .grid-table tbody tr, .primary-menu__link, .dashboard-menu__link {
    transition: none !important; animation-duration: .001ms !important;
  }
  .btn:hover, .product-item__box:hover, .dashboard-menu__link:hover, .primary-menu__link:hover { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .page-header, .page-sidebar .primary-menu-container-inner, .page-sidebar > .primary-menu-container,
  .product-item__box, .frontend-datagrid__panel, .dashboard-menu__link {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--glass-solid) !important;
  }
}