/* =========================================================================
   UR Store — lightweight storefront custom styles (layered on Bootstrap 5 RTL)
   Brand colors match lib/app_theme.dart / lib/screens/home_screen.dart in the
   Flutter app: primary purple #6A1B9A, dark purple #4A148C.
   ========================================================================= */

:root {
  --ur-primary: #6A1B9A;
  --ur-primary-dark: #4A148C;
  --ur-secondary: #AB47BC;
  --ur-light-purple-bg: #F3E5F5;
  --ur-text-primary: #1E1E2F;
  --ur-text-secondary: #71717A;
  --ur-border: #EBEBF0;
  --ur-bg: #F8F9FB;
  --ur-danger: #E53935;
  --ur-success: #2E7D32;
}

html, body {
  background: var(--ur-bg);
  font-family: 'Tajawal', -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ur-text-primary);
}

/* Room for the floating bottom nav below 1024px so it never overlaps the
   footer/last section — matches the same breakpoint the bar itself hides
   at, see .ur-bottom-nav below. */
body {
  padding-bottom: 92px;
}

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

a {
  text-decoration: none;
}

/* ============ Navbar ============ */
.ur-navbar {
  background: linear-gradient(to left, var(--ur-primary), var(--ur-primary-dark));
  box-shadow: 0 4px 14px rgba(106, 27, 154, 0.18);
}

.ur-navbar .navbar-brand {
  font-weight: 900;
  font-size: 1.35rem;
  color: #fff !important;
  letter-spacing: .5px;
}

.ur-navbar-logo {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 10px;
}

.ur-navbar .nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 14px !important;
}

.ur-navbar .nav-link.active,
.ur-navbar .nav-link:hover {
  color: #fff !important;
  font-weight: 900;
}

.ur-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: width .16s ease;
}

.ur-navbar .nav-link.active::after,
.ur-navbar .nav-link:hover::after {
  width: 20px;
}

.ur-navbar .btn-icon {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ur-navbar .btn-icon:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.ur-cart-badge,
.ur-wishlist-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  background: #E53935;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Cart badge sitting inline next to the "السلة" nav-link text (matches
   DesktopTopNav's inline count pill) instead of pinned to a corner. */
.ur-cart-badge-inline {
  position: static;
  margin-inline-start: 6px;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  font-size: .62rem;
  padding: 0 5px;
}

.ur-navbar-mobile-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.ur-navbar-mobile-row > :first-child { justify-self: start; }
.ur-navbar-mobile-row > :nth-child(2) { justify-self: center; }
.ur-navbar-mobile-row > :last-child { justify-self: end; }

.ur-navbar-logo-mobile {
  height: 34px;
  width: auto;
  object-fit: contain;
}

/* ============ Search suggestions dropdown ============ */
.ur-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.ur-search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ur-text-primary);
}

.ur-search-suggestion-item:hover {
  background: #FAFAFC;
  color: var(--ur-text-primary);
}

.ur-search-suggestion-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #FAFAFC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-search-suggestion-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ur-search-suggestion-empty {
  padding: 14px;
  text-align: center;
  color: var(--ur-text-secondary);
  font-size: .85rem;
}

/* ============ Mobile/tablet offcanvas menu ============ */
.ur-mobile-menu {
  width: 300px;
}

.ur-mobile-menu-header {
  background: linear-gradient(135deg, var(--ur-primary), var(--ur-primary-dark));
  padding: 24px 20px;
  border-radius: 0 0 24px 24px;
}

.ur-mobile-menu-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.ur-mobile-menu-login-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.ur-mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-radius: 14px;
  border: 1px solid var(--ur-border);
  text-decoration: none;
  color: var(--ur-text-primary);
  font-weight: 700;
  font-size: .88rem;
}

.ur-mobile-menu-item:hover {
  border-color: var(--ur-secondary);
  color: var(--ur-text-primary);
}

.ur-mobile-menu-item.highlight {
  background: var(--ur-light-purple-bg);
  border-color: rgba(106, 27, 154, .25);
  color: var(--ur-primary);
  font-weight: 900;
}

.ur-mobile-menu-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ur-light-purple-bg);
  color: var(--ur-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ur-mobile-menu-item.highlight .ur-mobile-menu-item-icon {
  background: var(--ur-primary);
  color: #fff;
}

.ur-mobile-menu-badge {
  background: var(--ur-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
}

/* ============ Search box — a single unified white rounded pill with the
   search icon acting as the submit button on the leading edge (matches
   _searchBar() in home_screen.dart exactly, rather than a separate
   input+button pair bolted together). ============ */
.ur-search-box {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  border: 1.6px solid rgba(0, 0, 0, .08);
  padding-inline-end: 4px;
  box-shadow: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.ur-search-box:focus-within {
  border-color: var(--ur-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.ur-search-box-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 4px;
  border: none;
  background: var(--ur-primary);
  border-radius: 50%;
  color: #fff;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.ur-search-box-btn:hover {
  background: var(--ur-primary-dark);
}

.ur-search-box-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ur-text-primary);
  padding: 0 2px;
  height: 100%;
}

.ur-search-box-input::placeholder {
  color: #8E8E93;
  font-weight: 500;
}

/* Hide native browser "clear" affordances on type=search so only our own
   .ur-search-box-clear button shows — avoids two overlapping X's. */
.ur-search-box-input::-webkit-search-cancel-button {
  display: none;
}

.ur-search-box-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: #F2F3F7;
  color: #71717A;
  border-radius: 50%;
  font-size: .62rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 6px;
}

/* ============ Bottom nav (mobile/tablet only, mirrors the Flutter app's
   CustomNavBar) ============ */
.ur-bottom-nav {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1030;
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 30px;
  box-shadow: 0 10px 28px rgba(106, 27, 154, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 6px;
}

.ur-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 2px;
  border-radius: 24px;
  color: #8E8E93;
  font-size: .64rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.ur-bottom-nav-item i {
  font-size: 1.15rem;
  line-height: 1;
}

.ur-bottom-nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--ur-primary), var(--ur-primary-dark));
  box-shadow: 0 4px 12px rgba(106, 27, 154, .35);
}

.ur-bottom-nav-item .ur-cart-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -10px;
}

@media (min-width: 1024px) {
  .ur-bottom-nav { display: none; }
}

/* Keep toasts (#urToastContainer, common.js toast()) clear of the floating
   bottom nav instead of sitting underneath/behind it. */
@media (max-width: 1023.98px) {
  #urToastContainer { bottom: 88px !important; }
}

/* ============ Footer ============ */
.ur-footer {
  background: #1E1E2F;
  color: rgba(255, 255, 255, 0.75);
  padding: 40px 0 20px;
  margin-top: 60px;
}

.ur-footer h6 {
  color: #fff;
  font-weight: 900;
  margin-bottom: 14px;
}

.ur-footer a {
  color: rgba(255, 255, 255, 0.7);
}

.ur-footer a:hover {
  color: #fff;
}

.ur-footer .ur-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 24px;
  padding-top: 16px;
  font-size: .82rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.ur-footer .ur-footer-credit {
  margin-top: 6px;
  font-size: .78rem;
  color: rgba(255, 255, 255, 0.4);
}

.ur-footer .ur-footer-credit a {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  text-decoration: none;
}

.ur-footer .ur-footer-credit a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============ Sections ============ */
.ur-section-title {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--ur-text-primary);
  margin-bottom: 2px;
}

.ur-section-subtitle {
  font-size: .8rem;
  color: #8E8E93;
  font-weight: 500;
}

.ur-view-all {
  color: var(--ur-primary);
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
}

/* ============ Banner carousel ============ */
.ur-banner-carousel .carousel-item img {
  width: 100%;
  height: 165px;
  object-fit: cover;
  border-radius: 20px;
}

@media (min-width: 768px) {
  .ur-banner-carousel .carousel-item img { height: 260px; }
}

@media (min-width: 992px) {
  .ur-banner-carousel .carousel-item img { height: 340px; }
}

/* ============ Home entry cards (PC Builder / Offers) ============ */
.ur-entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 108px;
  padding: 14px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ur-primary), var(--ur-primary-dark));
  box-shadow: 0 8px 20px rgba(106, 27, 154, .22);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ur-entry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.ur-entry-card-icon {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  font-size: 4.2rem;
  color: rgba(255, 255, 255, .18);
}

.ur-entry-card-img {
  position: absolute;
  bottom: -6px;
  inset-inline-end: -6px;
  height: 92px;
  width: 92px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}

.ur-entry-card-title {
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  position: relative;
  z-index: 1;
}

.ur-entry-card-cta {
  color: #fff;
  font-weight: 700;
  font-size: .76rem;
  position: relative;
  z-index: 1;
}

/* ============ Circle tiles (categories / brands) ============ */
.ur-circle-tile {
  width: 84px;
  text-align: center;
  color: var(--ur-text-primary);
}

.ur-circle-tile .ur-circle-img-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ur-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.ur-circle-tile .ur-circle-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.ur-circle-tile span {
  font-size: .74rem;
  font-weight: 700;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ Settings page ============ */
.ur-settings-account-card {
  display: block;
  background: linear-gradient(135deg, var(--ur-primary), var(--ur-primary-dark));
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(106, 27, 154, .22);
  color: #fff;
}

.ur-settings-account-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.ur-settings-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--ur-primary);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.3rem;
  flex-shrink: 0;
  overflow: hidden;
}

.ur-settings-avatar img,
.ur-mobile-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ur-settings-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ur-text-primary);
  font-weight: 700;
  font-size: .92rem;
}

.ur-settings-tile:hover {
  background: #FAFAFC;
  color: var(--ur-text-primary);
}

.ur-settings-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ur-light-purple-bg);
  color: var(--ur-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ur-social-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ur-light-purple-bg);
  border: 1.5px solid rgba(106, 27, 154, .2);
  color: var(--ur-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform .15s ease;
}

.ur-social-icon:hover {
  transform: translateY(-2px);
  color: var(--ur-primary-dark);
}

.ur-support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ur-text-primary);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ur-support-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .07);
  color: var(--ur-text-primary);
}

/* ============ Categories page (categories.html) ============ */
/* Child-category tiles: image on the right, name beside it (a horizontal
   row — image is the first DOM child so it lands on the right under RTL
   with no direction hacks needed), not the vertical brands.html card. */
.ur-child-category-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 16px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ur-text-primary);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ur-child-category-tile:hover {
  border-color: var(--ur-secondary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  color: var(--ur-text-primary);
}

.ur-child-category-tile-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-child-category-tile-img img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.ur-child-category-tile-name {
  flex-grow: 1;
  min-width: 0;
  font-weight: 800;
  font-size: .85rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}


.ur-category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: right;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ur-text-primary);
  transition: background .15s ease, color .15s ease;
}

.ur-category-row + .ur-category-row {
  margin-top: 2px;
}

.ur-category-row:hover {
  background: #FAFAFC;
}

.ur-category-row.active {
  background: var(--ur-light-purple-bg);
  color: var(--ur-primary);
}

.ur-category-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ur-category-row-name {
  flex-grow: 1;
  min-width: 0;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* The parent list column is only 4/12 wide even on phones (see
   categories.html — the two-column right/left layout stays at every
   breakpoint on purpose), so trim padding/icon/text a bit below the sm
   breakpoint to keep names legible in that narrower column. */
@media (max-width: 575.98px) {
  .ur-category-row {
    padding: 8px 5px;
    gap: 5px;
    font-size: .74rem;
  }

  .ur-category-row-icon {
    width: 24px;
    height: 24px;
  }

  .ur-category-row-name {
    font-size: .74rem;
    line-height: 1.22;
  }
}

.ur-category-row-icon img {
  max-width: 65%;
  max-height: 65%;
  object-fit: contain;
}

/* ============ Desktop category dropdown menu (index.html) ============
   Text-only accordion, no category images — desktop-only (see the
   d-none d-lg-block wrapper in index.html); mobile/tablet keep the
   original horizontal circle-tile row untouched. */
.ur-cat-dropdown {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ur-cat-dropdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--ur-primary);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  flex-shrink: 0;
}

.ur-cat-dropdown-list {
  padding: 6px;
  overflow-y: auto;
  flex-grow: 1;
}

.ur-cat-dropdown-node + .ur-cat-dropdown-node {
  border-top: 1px solid var(--ur-border);
}

.ur-cat-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ur-text-primary);
  text-align: right;
  text-decoration: none;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.ur-cat-dropdown-item:hover {
  background: #FAFAFC;
  color: var(--ur-primary);
}

.ur-cat-dropdown-chevron {
  transition: transform .2s ease;
  font-size: .74rem;
  color: var(--ur-text-secondary);
  flex-shrink: 0;
}

.ur-cat-dropdown-node.open > .ur-cat-dropdown-item {
  color: var(--ur-primary);
  background: var(--ur-light-purple-bg);
}

.ur-cat-dropdown-node.open > .ur-cat-dropdown-item .ur-cat-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--ur-primary);
}

.ur-cat-dropdown-children {
  display: none;
  padding-right: 14px;
}

.ur-cat-dropdown-node.open > .ur-cat-dropdown-children {
  display: block;
}

/* ============ Brand card (brands.html) ============ */
.ur-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 18px 12px;
  text-decoration: none;
  color: var(--ur-text-primary);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.ur-brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .07);
  color: var(--ur-text-primary);
}

.ur-brand-card-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-brand-card-logo img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.ur-brand-card-name {
  font-weight: 800;
  font-size: .88rem;
  text-align: center;
}

/* ============ Brand page header (brand.html) ============
   A compact, self-contained logo circle — deliberately not reusing
   .ur-circle-img-wrap here, since that class only constrains/clips its
   <img> when nested under .ur-circle-tile; used bare (as this page
   originally did) the logo rendered at its full natural size instead
   of being contained, producing an oversized "background image" look. */
.ur-brand-header {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 18px;
  padding: 16px 18px;
}

.ur-brand-header-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-brand-header-logo img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .ur-brand-header {
    padding: 12px 14px;
  }

  .ur-brand-header-logo {
    width: 52px;
    height: 52px;
  }
}

/* ============ Product card ============ */
.ur-product-card {
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}

.ur-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.ur-product-card .ur-product-img-wrap {
  aspect-ratio: 1 / 1;
  background: #FAFAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.ur-product-card .ur-product-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ur-wishlist-btn {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A1A1AA;
  font-size: .9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  transition: transform .15s ease, color .15s ease;
}

.ur-wishlist-btn:hover {
  transform: scale(1.08);
  color: var(--ur-danger);
}

.ur-wishlist-btn i.bi-heart-fill {
  display: none;
}

.ur-wishlist-btn.active {
  color: var(--ur-danger);
}

.ur-wishlist-btn.active i.bi-heart {
  display: none;
}

.ur-wishlist-btn.active i.bi-heart-fill {
  display: inline;
}

.ur-wishlist-btn-inline {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ur-border);
  background: #fff;
  color: #A1A1AA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}

.ur-wishlist-btn-inline:hover {
  transform: scale(1.06);
  color: var(--ur-danger);
  border-color: var(--ur-danger);
}

.ur-wishlist-btn-inline i.bi-heart-fill {
  display: none;
}

.ur-wishlist-btn-inline.active {
  color: var(--ur-danger);
  border-color: var(--ur-danger);
}

.ur-wishlist-btn-inline.active i.bi-heart {
  display: none;
}

.ur-wishlist-btn-inline.active i.bi-heart-fill {
  display: inline;
}

.ur-discount-badge {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  background: linear-gradient(135deg, #E53935, #C62828);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 10px;
}

.ur-product-card .card-body {
  padding: 10px;
}

.ur-product-name {
  font-size: .82rem;
  font-weight: 800;
  color: var(--ur-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ur-product-desc {
  font-size: .72rem;
  color: #71717A;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}

.ur-price-current {
  color: var(--ur-primary);
  font-weight: 900;
  font-size: .95rem;
}

.ur-price-old {
  color: #A1A1AA;
  font-weight: 600;
  font-size: .72rem;
  text-decoration: line-through;
}

.ur-add-cart-btn {
  background: var(--ur-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .76rem;
  width: 100%;
  padding: 7px 0;
}

.ur-add-cart-btn:hover {
  background: var(--ur-primary-dark);
  color: #fff;
}

/* ============ Product detail page ============ */
.ur-gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 16px;
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow .2s ease;
}

.ur-gallery-main:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.ur-gallery-main-img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .15s ease;
}

.ur-gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}

.ur-gallery-thumb {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: #fff;
  border: 1.5px solid var(--ur-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ur-gallery-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ur-gallery-thumb:hover {
  border-color: var(--ur-secondary);
  transform: translateY(-2px);
}

.ur-gallery-thumb.active {
  border-color: var(--ur-primary);
  box-shadow: 0 0 0 3px rgba(106, 27, 154, .15);
}

.ur-product-title {
  font-weight: 900;
  line-height: 1.3;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  color: var(--ur-text-primary);
  margin-bottom: 0;
}

.ur-product-price {
  font-weight: 900;
  color: var(--ur-primary);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}

.ur-feature-tile {
  transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
  .ur-feature-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  }
}

/* Sticky mobile/tablet buy bar (product.js toggles display:flex/none via an
   IntersectionObserver on the inline add-to-cart button) — hidden outright
   on desktop regardless of that JS state. */
.ur-sticky-buybar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 100px;
  z-index: 1025;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  padding: 10px 14px;
}

.ur-sticky-buybar-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #FAFAFC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-sticky-buybar-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ur-sticky-buybar-price {
  flex-grow: 1;
  font-size: .92rem;
}

@media (min-width: 1024px) {
  .ur-sticky-buybar { display: none !important; }
}

.ur-lightbox-content {
  background: rgba(10, 10, 15, .95);
  border: none;
  border-radius: 20px;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px;
}

.ur-lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.ur-lightbox-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
}

/* ============ Generic ============ */
.ur-btn-primary {
  background: var(--ur-primary);
  border-color: var(--ur-primary);
  color: #fff;
  font-weight: 800;
}

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

.ur-btn-outline {
  border: 1.4px solid var(--ur-secondary);
  color: var(--ur-secondary);
  font-weight: 700;
  background: transparent;
}

.ur-badge-soft {
  background: var(--ur-light-purple-bg);
  color: var(--ur-primary);
  font-weight: 800;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ur-card-section {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.02);
}

.ur-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ur-text-secondary);
}

.ur-empty-state .ur-empty-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--ur-light-purple-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 2.2rem;
  color: var(--ur-primary);
}

.ur-spinner-wrap {
  text-align: center;
  padding: 60px 0;
}

.spinner-border.ur-spinner {
  color: var(--ur-primary);
}

/* ============ Quantity stepper ============ */
.ur-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: rgba(106,27,154,.08);
  border: 1px solid rgba(106,27,154,.2);
  border-radius: 14px;
}

.ur-qty-stepper button {
  background: none;
  border: none;
  color: var(--ur-primary);
  width: 34px;
  height: 34px;
  font-weight: 900;
  font-size: 1rem;
}

.ur-qty-stepper span {
  min-width: 28px;
  text-align: center;
  font-weight: 900;
}

/* ============ Cart / checkout rows ============ */
.ur-cart-row {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}

.ur-cart-row img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #FAFAFC;
  border-radius: 10px;
  padding: 4px;
}

/* ============ Color swatches ============ */
.ur-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #d8d8d8;
  display: inline-block;
}

.ur-size-chip {
  background: #F4F4F6;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-block;
}

/* ============ PC builder ============ */
.ur-rig-panel {
  background: linear-gradient(135deg, #181528, #0F0C1B);
  border: 1.5px solid rgba(106,27,154,.45);
  border-radius: 26px;
  padding: 20px;
  color: #fff;
}

.ur-rig-slot {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 10px;
  min-width: 92px;
  text-align: center;
}

.ur-rig-slot.filled {
  background: rgba(106,27,154,.35);
  border-color: #00E676;
}

.ur-rig-slot img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.ur-component-tile {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .02);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover: hover) {
  .ur-component-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
  }
}

.ur-component-tile.selected {
  border-color: rgba(106, 27, 154, .3);
  box-shadow: 0 4px 14px rgba(106, 27, 154, .07);
}

.ur-component-installed-badge {
  background: #E8F5E9;
  color: #2E7D32;
  font-size: .66rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
}

.ur-component-remove-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  background: #FFEBEE;
  color: #D32F2F;
  border-radius: 50%;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ur-component-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #F4F4F6;
  color: #8E8E93;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
}

.ur-component-tile .ur-component-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ur-light-purple-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ur-primary);
  overflow: hidden;
}

.ur-component-tile.selected .ur-component-icon-wrap {
  background: #fff;
  border: 1px solid var(--ur-border);
}

.ur-component-tile .ur-component-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============ PC Builder product picker modal ============ */
.ur-picker-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.ur-picker-search {
  padding-inline-start: 40px;
  border-radius: 14px;
}

.ur-picker-search-wrap i {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  color: #A1A1AA;
  pointer-events: none;
}

.ur-picker-list {
  max-height: 55vh;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.ur-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  text-align: right;
  transition: border-color .15s ease, background .15s ease;
}

.ur-picker-item:hover {
  border-color: var(--ur-secondary);
  background: #FAFAFC;
}

.ur-picker-item-img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: #FAFAFC;
  border: 1px solid var(--ur-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ur-picker-item-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============ Order status timeline ============ */
.ur-status-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.ur-status-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.ur-status-step .ur-status-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F2F3F7;
  color: #A1A1AA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.ur-status-step.done .ur-status-dot {
  background: var(--ur-primary);
  color: #fff;
}

/* Connects each step's dot to the NEXT step's dot. Under this site's
   RTL flex row, the next DOM sibling sits physically to the left, so
   the line must grow leftward from the current dot's center — i.e.
   `right: 50%` (mirrors the standard LTR `left: 50%` pattern by only
   swapping the property, not its sign). Using `right: -50%` here would
   be the un-mirrored LTR value and pushes the first step's line out
   past the card's right edge instead of into the second step. */
.ur-status-step::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: #F2F3F7;
  z-index: 1;
}

.ur-status-step:last-child::after {
  content: none;
}

.ur-status-step.done::after {
  background: var(--ur-primary);
}

.ur-status-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ur-text-secondary);
  line-height: 1.25;
  padding: 0 2px;
}

.ur-status-step.done .ur-status-label {
  color: var(--ur-text-primary);
}

@media (max-width: 575.98px) {
  .ur-status-track {
    margin: 16px 0 4px;
  }

  .ur-status-step .ur-status-dot {
    width: 28px;
    height: 28px;
    font-size: .8rem;
    margin-bottom: 5px;
  }

  .ur-status-step::after {
    top: 14px;
  }

  .ur-status-label {
    font-size: .64rem;
  }
}

/* ============ Order cards (track-order.html) ============ */
.ur-order-card {
  background: #fff;
  border: 1px solid var(--ur-border);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ur-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

.ur-order-date-badge {
  background: #F2F3F7;
  color: var(--ur-text-secondary);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
}

.ur-order-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFC;
  border-radius: 14px;
  padding: 9px 12px;
}

.ur-order-status-badge {
  font-size: .72rem;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.ur-order-items-box {
  background: #FAFAFC;
  border-radius: 14px;
  padding: 14px;
}

.ur-order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ur-border);
}

.ur-order-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ur-empty-illustration {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
}

.ur-auth-illustration {
  height: 190px;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 8px;
}

/* ============ PC Builder sticky summary bar — floats above the mobile/
   tablet bottom nav instead of a flush fixed-bottom sheet the nav pill
   would otherwise sit on top of and hide. ============ */
.ur-pcbuilder-bottombar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 100px;
  z-index: 1025;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  padding: 14px 18px;
  max-width: 872px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .ur-pcbuilder-bottombar {
    bottom: 24px;
  }
}

/* ============ 404 page ============ */
.ur-404-code {
  font-size: 5rem;
  font-weight: 900;
  color: var(--ur-primary);
  opacity: .15;
  line-height: 1;
  margin-bottom: -10px;
}

/* ============ Maintenance mode (AppSettings/maintenance) ============ */
.ur-maintenance-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: var(--ur-bg);
}

.ur-maintenance-gif {
  width: 240px;
  height: 240px;
  object-fit: contain;
  margin-bottom: 24px;
}

.ur-maintenance-gif-fallback {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--ur-primary), var(--ur-primary-dark));
  box-shadow: 0 10px 30px rgba(106, 27, 154, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.4rem;
}

.ur-maintenance-screen h1 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ur-text-primary);
  margin-bottom: 14px;
}

.ur-maintenance-message {
  background: var(--ur-light-purple-bg);
  color: var(--ur-text-secondary);
  border-radius: 16px;
  padding: 14px 18px;
  max-width: 440px;
  font-weight: 600;
  line-height: 1.7;
}

/* ============ Utility ============ */
.ur-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ur-skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: ur-shimmer 1.4s ease infinite;
  border-radius: 12px;
}

@keyframes ur-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}