@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ========================================================
     THEME: REFINED CMYK PALETTE
     Toned down slightly for a more premium, trustworthy UK retail feel.
     ======================================================== */
  --shop-cyan: #0085ca; /* A deeper, "trusted retailer" blue-cyan */
  --shop-magenta: #d0006f; /* Richer magenta, less neon, great for sales */
  --shop-yellow: #ffd100; /* Warm yellow, explicitly used for focus states/stars */
  --shop-key: #1d1d1b; /* Off-black to reduce eye strain (highly recommended in UK a11y) */

  /* ========================================================
     SURFACES & BACKGROUNDS
     Crisp and neutral to let hardware imagery stand out.
     ======================================================== */
  --shop-bg-canvas: #ffffff;
  --shop-bg-panel: #f3f4f6; /* Standard cool grey for UK basket/checkout panels */
  --shop-bg-card: #ffffff;
  --shop-bg-overlay: rgba(29, 29, 27, 0.6);

  /* ========================================================
     TYPOGRAPHY & INK
     Switching to Inter for optimal legibility across devices.
     ======================================================== */
  --shop-font-main:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shop-ink-primary: var(--shop-key);
  --shop-ink-body: #4b5563; /* Accessible dark grey for body copy */
  --shop-ink-muted: #6b7280; /* Secondary text, VAT details, SKUs */
  --shop-ink-inverse: #ffffff;

  /* ========================================================
     E-COMMERCE STATUS COLOURS (UK Standards)
     Aligned with widely recognised UK accessibility contrast ratios.
     ======================================================== */
  --shop-status-instock: #00703c; /* Deeper, high-contrast green */
  --shop-status-lowstock: #d25f15; /* Accessible burnt orange */
  --shop-status-outstock: #d4351c; /* Strong, clear red */

  /* ========================================================
     INTERACTIVE ELEMENTS
     ======================================================== */
  --shop-btn-primary-bg: var(--shop-cyan);
  --shop-btn-primary-hover: #006aa3; /* Darkens safely for hover */
  --shop-btn-secondary-bg: var(--shop-bg-canvas);
  --shop-btn-secondary-border: var(--shop-key);

  --shop-border-subtle: #e5e7eb;
  --shop-border-strong: #d1d5db; /* Clearer borders often preferred over heavy shadows */

  /* Focus ring for keyboard navigation (Crucial for UK web standards) */
  --shop-focus-ring: 4px solid var(--shop-yellow);
  --shop-focus-outline: 4px solid var(--shop-key);

  /* ========================================================
     GEOMETRY (Radii)
     Softer, modern curves.
     ======================================================== */
  --shop-radius-sm: 4px;
  --shop-radius-md: 8px;
  --shop-radius-lg: 16px;

  /* ========================================================
     ELEVATION (Shadows)
     Flatter, more grounded shadows typical of modern UK tech retail.
     ======================================================== */
  --shop-shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shop-shadow-hover:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shop-shadow-dropdown: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ========================================================
     SPACING & GRID
     ======================================================== */
  --shop-space-xs: 0.25rem; /* 4px */
  --shop-space-sm: 0.5rem; /* 8px */
  --shop-space-md: 1rem; /* 16px */
  --shop-space-lg: 1.5rem; /* 24px */
  --shop-space-xl: 2.5rem; /* 40px - Slightly more breathing room */

  --shop-grid-gap: 24px;
  --shop-max-width: 1280px;

  /* ========================================================
     MOTION
     ======================================================== */
  --shop-transition-fast: 150ms ease;
  --shop-transition-smooth: 300ms ease;
}

/* ========================================================
   BASE STYLES: The Canvas
   ======================================================== */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  background-color: var(--shop-bg-panel); /* Soft grey outside main container */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--shop-bg-canvas);
  color: var(--shop-ink-body);
  font-family: var(--shop-font-main);
  line-height: 1.5; /* Slightly tighter line-height for e-commerce density */
  min-height: 100vh;
  /* Replaced top border with a more traditional retail header shadow/border approach later, 
     but kept a subtle accent here if desired */
  border-top: 4px solid var(--shop-cyan);
}

/* ========================================================
   LINKS & ACCESSIBILITY (A11y)
   UK sites heavily prioritise visible focus states and clear links.
   ======================================================== */
a {
  color: var(--shop-cyan);
  text-decoration: underline; /* Standard UK practice: underline links by default in body copy */
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--shop-transition-fast),
    text-decoration-color var(--shop-transition-fast);
  font-weight: 500;
}

a:hover {
  color: var(--shop-btn-primary-hover);
  text-decoration-color: var(--shop-btn-primary-hover);
}

/* Crucial UK Accessibility standard: The bold focus state */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--shop-focus-outline);
  box-shadow: 0 0 0 4px var(--shop-yellow);
  outline-offset: 2px;
  text-decoration: none;
}

/* ========================================================
   SCROLLBAR
   Subtle, modern, and unobtrusive.
   ======================================================== */
::-webkit-scrollbar {
  width: 10px; /* Slightly slimmer */
}

::-webkit-scrollbar-track {
  background: var(--shop-bg-panel);
}

::-webkit-scrollbar-thumb {
  background: #9ca3af; /* Muted grey */
  border-radius: var(--shop-radius-lg);
  border: 2px solid var(--shop-bg-panel);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--shop-ink-muted);
}

/* ========================================================
   BANNER SECTION (The Wrapper)
   ======================================================== */
.uk-banner-section {
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
  border-bottom: 1px solid #e5e7eb;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.uk-banner-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem; /* 20px padding for mobile */
}

/* ========================================================
   BREADCRUMBS (Clean & Minimal)
   ======================================================== */
.uk-breadcrumb {
  margin-bottom: 1.5rem;
}

.uk-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem; /* 14px */
  font-family: inherit;
}

.uk-breadcrumb__item {
  display: flex;
  align-items: center;
}

.uk-breadcrumb__link {
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0.25rem;
  margin: -0.25rem; /* Increases click area without moving layout */
  border-radius: 4px;
  transition: all 0.2s ease;
}

.uk-breadcrumb__link:hover {
  color: #0085ca; /* Brand Blue */
  background-color: #f3f4f6;
}

/* Accessibility Focus Ring */
.uk-breadcrumb__link:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  background-color: #ffffff;
}

.uk-breadcrumb__separator {
  color: #d1d5db;
  font-weight: 400;
  margin: 0 0.25rem;
  user-select: none;
}

.uk-breadcrumb__current {
  color: #111827;
  font-weight: 500;
}

/* ========================================================
   CONTENT (Title, Badge, Description)
   ======================================================== */
.uk-banner-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-banner-title {
  margin: 0;
  color: #111827;
  font-size: 1.75rem; /* 28px on mobile */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* The Accent Text / Badge */
.uk-banner-badge {
  background-color: #d0006f; /* Deep Retail Magenta */
  color: #ffffff;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px; /* Pill shape */
  box-shadow: 0 2px 4px rgba(208, 0, 111, 0.2);
  display: inline-block;
  line-height: 1;
}

.uk-banner-description {
  margin: 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 70ch; /* Prevents text from becoming too wide to read */
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 768px) {
  .uk-banner-section {
    padding: 3rem 0;
  }

  .uk-banner-container {
    padding: 0 2rem;
  }

  .uk-banner-title {
    font-size: 2.25rem; /* 36px */
  }

  .uk-banner-description {
    font-size: 1.125rem; /* 18px */
  }
}

@media (min-width: 1024px) {
  .uk-banner-title {
    font-size: 2.5rem; /* 40px */
  }
}

/* ========================================================
   GLOBAL CONTAINER
   ======================================================== */
.uk-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ========================================================
   TOPBAR
   High contrast dark mode, typical for UK retail promos.
   ======================================================== */
.uk-topbar {
  background-color: #111827;
  color: #ffffff;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  padding: 0.5rem 0;
}

.uk-topbar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.uk-topbar__links {
  display: flex;
  gap: 1.5rem;
}

.uk-topbar__link {
  color: #d1d5db;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.uk-topbar__link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ========================================================
   MAIN HEADER (Sticky)
   ======================================================== */
.uk-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.3s ease;
}

/* Applied via JS when scrolling */
.uk-header.is-sticky {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.uk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px; /* Base height for mobile */
  gap: 1rem;
}

/* ========================================================
   BRAND / LOGO (Requested: BIG)
   ======================================================== */
.uk-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.uk-brand__img {
  height: 55px; /* Big for mobile */
  width: auto;
  object-fit: contain;
}

/* ========================================================
   NAVIGATION (Desktop)
   ======================================================== */
.uk-desktop-nav {
  display: none; /* Hidden on mobile */
}

/* ========================================================
   SEARCH FORM
   Retail standard: bold border, distinct button
   ======================================================== */
.uk-search-wrapper {
  display: none; /* Hidden on mobile header, shown in drawer */
  flex-grow: 1;
  max-width: 400px;
}

.uk-search-form {
  display: flex;
  width: 100%;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background: #f9fafb;
}

.uk-search-form:focus-within {
  border-color: #0085ca; /* Brand Blue */
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.2);
}

.uk-search-form__input {
  flex-grow: 1;
  border: none;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
  background: transparent;
  color: #111827;
  outline: none;
}

.uk-search-form__btn {
  background: #f3f4f6;
  border: none;
  border-left: 2px solid #d1d5db;
  padding: 0 1rem;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uk-search-form__btn:hover {
  background: #0085ca;
  color: #ffffff;
  border-color: #0085ca;
}

/* ========================================================
   ICONS & ACTIONS (Account, Basket)
   ======================================================== */
.uk-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.uk-action-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.uk-action-icon:hover {
  color: #0085ca;
}

.uk-action-icon__label {
  display: none; /* Hidden on mobile to save space */
  font-size: 0.75rem;
  font-weight: 600;
}

.uk-cart-icon__wrapper {
  position: relative;
  display: flex;
}

.uk-cart-icon__badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: #d0006f; /* Sale Magenta */
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  height: 18px;
  min-width: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
}

/* ========================================================
   MOBILE TOGGLE
   ======================================================== */
.uk-mobile-toggle {
  display: block;
  background: none;
  border: none;
  color: #111827;
  padding: 0.5rem;
  margin-left: -0.5rem;
  cursor: pointer;
}

/* ========================================================
   MOBILE DRAWER
   ======================================================== */
.uk-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
}

.uk-drawer.is-open {
  visibility: visible;
}

.uk-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.uk-drawer.is-open .uk-drawer__overlay {
  opacity: 1;
}

.uk-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  background: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}

.uk-drawer.is-open .uk-drawer__panel {
  transform: translateX(0);
}

.uk-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.uk-drawer__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.uk-drawer__close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: -0.5rem;
}

.uk-drawer__search {
  padding: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.uk-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  overflow-y: auto;
}

.uk-drawer__link {
  padding: 1rem 1.25rem;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 4px solid transparent;
}

.uk-drawer__link:hover,
.uk-drawer__link:focus-visible {
  background: #f9fafb;
  border-left-color: #0085ca;
  color: #0085ca;
}

/* ========================================================
   RESPONSIVE DESIGN (Desktop Upgrades)
   ======================================================== */
@media (min-width: 768px) {
  .uk-topbar__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .uk-header__inner {
    height: 100px; /* Even taller for desktop */
  }

  .uk-brand__img {
    height: 75px; /* Massive, highly visible logo */
  }

  .uk-mobile-toggle {
    display: none; /* Hide hamburger */
  }

  .uk-desktop-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .uk-desktop-nav__link {
    color: #4b5563;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s ease;
    position: relative;
  }

  .uk-desktop-nav__link:hover {
    color: #111827;
  }

  /* Standard UK retail hover underline */
  .uk-desktop-nav__link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #0085ca;
    transition: width 0.3s ease;
  }

  .uk-desktop-nav__link:hover::after {
    width: 100%;
  }

  .uk-search-wrapper {
    display: block; /* Show desktop search */
  }

  .uk-action-icon__label {
    display: block; /* Show text under icons */
  }

  .uk-actions {
    gap: 1.75rem;
  }
}

/* ========================================================
   HERO SECTION WRAPPER
   ======================================================== */
.uk-hero {
  background-image: url(../../assets/images/bgbanner.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0;
  overflow: hidden;
}

.uk-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* ========================================================
   LEFT COLUMN: CONTENT
   ======================================================== */
.uk-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 2;
}

/* Trust Signals (Stars) */
.uk-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
}

.uk-hero__stars {
  color: #00b67a; /* Trustpilot Green */
  font-size: 1.25rem;
  letter-spacing: 2px;
}

/* Typography */
.uk-hero__title {
  margin: 0;
  font-size: 2.5rem; /* 40px on mobile */
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.uk-text-highlight {
  color: #0085ca; /* Brand Cyan */
}

.uk-hero__desc {
  margin: 0;
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.6;
  max-width: 540px;
}

/* Buttons */
.uk-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

.uk-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.uk-btn--primary {
  background-color: #0085ca;
  color: #ffffff;
  border: 2px solid #0085ca;
  box-shadow: 0 4px 6px -1px rgba(0, 133, 202, 0.2);
}

.uk-btn--primary:hover {
  background-color: #006aa3;
  border-color: #006aa3;
}

.uk-btn--secondary {
  background-color: #ffffff;
  color: #111827;
  border: 2px solid #d1d5db;
}

.uk-btn--secondary:hover {
  border-color: #111827;
  background-color: #f9fafb;
}

/* Accessibility Focus State for Buttons */
.uk-btn:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  outline-offset: 2px;
}

/* Perks / Value Props */
.uk-hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.uk-hero__perk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

/* ========================================================
   RIGHT COLUMN: MEDIA & IMAGERY
   ======================================================== */
.uk-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

/* Floating animation for the printer */
.uk-hero__img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
  animation: uk-float 6s ease-in-out infinite;
}

@keyframes uk-float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Floating Promo Badge */
.uk-hero__floating-badge {
  position: absolute;
  bottom: 10%;
  right: 5%;
  z-index: 2;
  background: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  border-left: 4px solid #d0006f; /* Brand Magenta */
  animation: uk-float 6s ease-in-out infinite reverse; /* Floats opposite to printer */
}

.uk-hero__badge-title {
  color: #d0006f;
  font-weight: 800;
  font-size: 1.125rem;
}

.uk-hero__badge-sub {
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 768px) {
  .uk-hero__actions {
    flex-direction: row; /* Buttons side-by-side on tablet */
  }
}

@media (min-width: 1024px) {
  .uk-hero {
    padding: 5rem 0; /* More breathing room on desktop */
  }

  .uk-hero__inner {
    grid-template-columns: 1fr 1fr; /* Exact 50/50 split */
    gap: 4rem;
  }

  .uk-hero__title {
    font-size: 4rem; /* Massive, punchy headline */
  }

  .uk-hero__desc {
    font-size: 1.25rem;
  }

  .uk-hero__backdrop {
    transform: scale(1.3) translateX(10%); /* Shifts gradient slightly off-center */
  }
}

/* ========================================================
   CATEGORY SECTION WRAPPER
   Using a soft off-white background to separate it from 
   the hero section above it.
   ======================================================== */
.uk-category-section {
  background-color: #f9fafb;
  padding: 4rem 0;
  border-bottom: 1px solid #e5e7eb;
}

/* ========================================================
   SECTION HEADER
   ======================================================== */
.uk-category-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.uk-section-title {
  margin: 0 0 0.75rem 0;
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.uk-section-desc {
  margin: 0 auto;
  font-size: 1.125rem;
  color: #4b5563;
  max-width: 600px;
  line-height: 1.5;
}

/* ========================================================
   CATEGORY GRID
   Mobile-first: 1 column, scaling up to 4 on desktop.
   ======================================================== */
.uk-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0 1rem;
}

/* ========================================================
   CATEGORY CARD
   ======================================================== */
.uk-category-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

/* Card Hover & Focus States */
.uk-category-card:hover {
  border-color: #0085ca; /* Brand Blue */
  box-shadow: 0 10px 20px -5px rgba(0, 133, 202, 0.15);
  transform: translateY(-4px); /* Slight lift */
}

.uk-category-card:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  border-radius: 12px;
}

/* Media/Image Area */
.uk-category-card__media {
  background-color: #ffffff;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3; /* Keeps all images uniformly sized */
  border-bottom: 1px solid #f3f4f6;
}

.uk-category-card__img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle image zoom on hover */
.uk-category-card:hover .uk-category-card__img {
  transform: scale(1.08);
}

/* Info/Text Area */
.uk-category-card__info {
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.uk-category-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.uk-category-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #0085ca;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: gap 0.2s ease;
}

.uk-category-card__link svg {
  transition: transform 0.2s ease;
}

/* Arrow slides right on hover */
.uk-category-card:hover .uk-category-card__link svg {
  transform: translateX(4px);
}

/* ========================================================
   FOOTER & OUTLINE BUTTON
   ======================================================== */
.uk-category-footer {
  text-align: center;
  margin-top: 3.5rem;
}

.uk-btn-outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  background-color: transparent;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.uk-btn-outline:hover {
  border-color: #111827;
  background-color: #f9fafb;
}

.uk-btn-outline:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  outline-offset: 2px;
}

/* ========================================================
   RESPONSIVE LAYOUT (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  /* Tablet: 2 columns */
  .uk-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  /* Desktop: 4 columns */
  .uk-category-section {
    padding: 5rem 0;
  }

  .uk-section-title {
    font-size: 2.5rem;
  }

  .uk-category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 0; /* Container handles padding on large screens */
  }
}

/* ========================================================
   SHOWCASE SECTION WRAPPER
   ======================================================== */
.uk-showcase-section {
  padding: 4rem 0;
  background-color: #ffffff;
}

.uk-showcase-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.uk-showcase-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Reusing your badge concept but restyled for the UK theme */
.uk-badge--blue {
  background-color: #e0f2fe;
  color: #0085ca;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================================
   FILTER TABS
   ======================================================== */
.uk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.uk-tab {
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  font-family: inherit;
}

.uk-tab:hover {
  color: #111827;
}

/* Active State Underline */
.uk-tab::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Pulls it over the grey border */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0085ca;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.uk-tab.is-active {
  color: #111827;
}

.uk-tab.is-active::after {
  transform: scaleX(1);
}

/* Focus State */
.uk-tab:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ========================================================
   PRODUCT GRID & ANIMATION
   ======================================================== */
.uk-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.uk-product-grid.is-updating {
  opacity: 0;
}

/* ========================================================
   PRODUCT CARD
   ======================================================== */
.uk-product-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
}

.uk-product-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.uk-product-card:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  border-radius: 8px;
}

/* Greyed out if sold out */
.uk-product-card.is-sold-out .uk-product-card__img {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* --- Media Area --- */
.uk-product-card__media {
  position: relative;
  background-color: #f9fafb; /* Soft grey background makes white hardware pop */
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.uk-product-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  mix-blend-mode: darken;
}

.uk-product-card:hover .uk-product-card__img {
  transform: scale(1.05);
}

/* --- Badges & Ratings --- */
.uk-product-card__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.uk-tag--danger {
  background-color: #d4351c; /* UK Standard Accessible Red */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.uk-product-card__rating {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Info Area --- */
.uk-product-card__info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uk-product-card__category {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.uk-product-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1rem 0;
  line-height: 1.4;
  /* Truncates extra long names to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Footer (Price & Button) --- */
.uk-product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.uk-product-card__price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}

.uk-product-card__btn {
  background-color: #f3f4f6;
  border: none;
  color: #111827;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uk-product-card:hover .uk-product-card__btn {
  background-color: #0085ca;
  color: #ffffff;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .uk-showcase-section {
    padding: 5rem 0;
  }

  .uk-showcase-top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .uk-product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ========================================================
   ABOUT SECTION WRAPPER
   ======================================================== */
.uk-about-section {
  padding: 4rem 0 5rem 0;
  background-color: #f9fafb; /* Soft grey to differentiate from white sections */
  overflow: hidden;
}

.uk-about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

/* ========================================================
   LEFT COLUMN: CONTENT
   ======================================================== */
.uk-about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.uk-badge--magenta {
  background-color: #d0006f;
  color: #ffffff;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.uk-about-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.02em;
}

.uk-text-highlight {
  color: #0085ca; /* Brand Blue */
}

.uk-about-prose {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.uk-about-prose p {
  margin: 0 0 1rem 0;
}

.uk-about-prose p:last-child {
  margin-bottom: 0;
}

/* ========================================================
   FEATURES LIST
   ======================================================== */
.uk-about-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uk-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.uk-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #e0f2fe; /* Light Blue */
  color: #0085ca; /* Brand Blue */
  border-radius: 12px;
  flex-shrink: 0;
}

.uk-feature-icon--green {
  background-color: #d1fae5;
  color: #059669; /* Trust Green */
}

.uk-feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.uk-feature-text strong {
  color: #111827;
  font-size: 1.05rem;
}

.uk-feature-text span {
  color: #6b7280;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ========================================================
   BUTTONS
   ======================================================== */
.uk-about-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 480px) {
  .uk-about-actions {
    flex-direction: row;
    width: auto;
  }
}

/* Reusing previously defined button styles for completeness */
.uk-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.uk-btn--primary {
  background-color: #0085ca;
  color: #ffffff;
  border: 2px solid #0085ca;
  box-shadow: 0 4px 6px -1px rgba(0, 133, 202, 0.2);
}

.uk-btn--primary:hover {
  background-color: #006aa3;
  border-color: #006aa3;
}

.uk-btn--outline {
  background-color: transparent;
  color: #111827;
  border: 2px solid #d1d5db;
}

.uk-btn--outline:hover {
  background-color: #ffffff;
  border-color: #111827;
}

/* ========================================================
   RIGHT COLUMN: VISUALS
   ======================================================== */
.uk-about-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.uk-about-bg-shape {
  position: absolute;
  top: -5%;
  right: -5%;
  width: 100%;
  height: 100%;
  background-color: #e5e7eb; /* Subtle offset background */
  border-radius: 24px;
  transform: rotate(3deg);
  z-index: 0;
}

.uk-about-img-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.uk-about-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3; /* Keeps image nicely proportioned */
}

/* Floating Stat Card */
.uk-stat-card {
  position: absolute;
  bottom: -1rem; /* Overhangs the image slightly on desktop */
  left: -1rem;
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 2;
  border: 1px solid #f3f4f6;
}

.uk-stat-card__icon {
  background: #e0f2fe;
  padding: 0.75rem;
  border-radius: 50%;
  display: flex;
}

.uk-stat-card__data {
  display: flex;
  flex-direction: column;
}

.uk-stat-card__number {
  color: #111827;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.uk-stat-card__label {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ========================================================
   RESPONSIVE LAYOUT (Desktop)
   ======================================================== */
@media (min-width: 1024px) {
  .uk-about-section {
    padding: 6rem 0;
  }

  .uk-about-inner {
    grid-template-columns: 1fr 1fr; /* 50/50 split on desktop */
    gap: 6rem;
  }

  .uk-about-title {
    font-size: 3rem; /* Larger font for desktop */
  }

  .uk-stat-card {
    bottom: -2rem;
    left: -2rem; /* Pulls out further on big screens */
  }
}

/* ========================================================
   VALUE PROPS SECTION WRAPPER
   ======================================================== */
.uk-value-props {
  padding: 4rem 0 5rem 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* ========================================================
   HEADER
   ======================================================== */
.uk-value-props__header {
  text-align: center;
  margin-bottom: 3.5rem;
  padding: 0 1rem;
}

/* Reusing global typography standards */
.uk-section-title {
  margin: 0 0 0.75rem 0;
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.uk-section-desc {
  margin: 0 auto;
  font-size: 1.125rem;
  color: #4b5563;
  max-width: 600px;
  line-height: 1.5;
}

/* ========================================================
   FEATURES GRID
   Mobile First: 1 Column -> 2 Columns -> 4 Columns
   ======================================================== */
.uk-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* ========================================================
   FEATURE CARD
   Left-aligned text is much easier to read and looks
   more professional for paragraphs of text.
   ======================================================== */
.uk-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left aligned */
  padding: 1.5rem;
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Subtle interactive state */
.uk-feature-card:hover {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* ========================================================
   ICON STYLING
   Unified "Trust Blue" theme instead of harsh CMYK
   ======================================================== */
.uk-feature-card__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #e0f2fe; /* Very soft blue */
  color: #0085ca; /* Brand Blue */
  border-radius: 16px;
  margin-bottom: 1.5rem;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.uk-feature-card:hover .uk-feature-card__icon-wrapper {
  background-color: #0085ca;
  color: #ffffff;
  transform: scale(1.05); /* Icon gently pops on hover */
}

/* ========================================================
   TYPOGRAPHY
   ======================================================== */
.uk-feature-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.uk-feature-card__desc {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  /* Tablet: 2x2 Grid */
  .uk-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  /* Desktop: 4x1 Grid */
  .uk-value-props {
    padding: 5rem 0 6rem 0;
  }

  .uk-section-title {
    font-size: 2.5rem;
  }

  .uk-features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ========================================================
   RECENTLY VIEWED SECTION
   Uses a soft background to separate it from the main flow.
   ======================================================== */
.uk-recent-section {
  padding: 4rem 0;
  background-color: #f9fafb; /* Soft grey */
  border-top: 1px solid #e5e7eb;
  opacity: 1; /* For JS fade out */
}

/* ========================================================
   HEADER & CONTROLS
   ======================================================== */
.uk-recent-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

/* Clear History Button */
.uk-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  font-family: inherit;
}

.uk-btn-clear:hover {
  color: #d4351c; /* UK standard accessible red for destructive actions */
}

.uk-btn-clear:focus-visible {
  outline: 3px solid #1d1d1b;
  box-shadow: 0 0 0 6px #ffd100;
  border-radius: 4px;
  padding: 0.5rem; /* Adds padding back just for the focus ring */
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-recent-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; /* Aligns button nicely with the title baseline */
  }

  /* Removes bottom margin from title since they are side-by-side */
  .uk-recent-header .uk-section-title {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .uk-recent-section {
    padding: 5rem 0;
  }
}

/* ========================================================
   FOOTER BASE
   ======================================================== */
.uk-footer {
  background-color: #111827; /* Deep, authoritative dark gray/blue */
  color: #d1d5db; /* Soft off-white text for legibility */
  font-family: inherit;
}

/* ========================================================
   NEWSLETTER SECTION
   ======================================================== */
.uk-footer__newsletter {
  background-color: #1f2937; /* Slightly lighter shade to separate from main footer */
  padding: 3rem 0;
  border-bottom: 1px solid #374151;
}

.uk-footer__newsletter-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uk-newsletter-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.uk-newsletter-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.uk-newsletter-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: #9ca3af;
}

/* Form Styles */
.uk-newsletter-form {
  width: 100%;
  max-width: 500px;
}

.uk-newsletter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.uk-newsletter-input {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #4b5563;
  background-color: #111827;
  color: #ffffff;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.uk-newsletter-input::placeholder {
  color: #6b7280;
}

.uk-newsletter-input:focus {
  border-color: #0085ca;
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.3);
}

.uk-newsletter-btn {
  width: 100%; /* Full width on mobile */
}

/* ========================================================
   MAIN FOOTER GRID
   ======================================================== */
.uk-footer__main {
  padding: 4rem 0;
}

.uk-footer__main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Brand Column */
.uk-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 1rem;
}

.uk-footer__about {
  color: #9ca3af;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  max-width: 400px;
}

/* Contact Links */
.uk-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.uk-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #d1d5db;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.uk-footer__contact-link:hover {
  color: #0085ca;
}

/* Navigation Columns */
.uk-footer__heading {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
}

.uk-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.uk-footer__link {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.9375rem;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.uk-footer__link:hover {
  color: #ffffff;
  padding-left: 4px; /* Subtle arrow-like shift on hover */
}

.uk-footer__link:focus-visible,
.uk-footer__contact-link:focus-visible {
  outline: 3px solid #ffd100;
  outline-offset: 4px;
  color: #ffffff;
  border-radius: 2px;
}

/* ========================================================
   BOTTOM BAR
   ======================================================== */
.uk-footer__bottom {
  border-top: 1px solid #374151;
  padding: 1.5rem 0;
  background-color: #0b0f19; /* Even darker shade for the very bottom */
}

.uk-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}

.uk-footer__address {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-newsletter-group {
    flex-direction: row;
  }

  .uk-newsletter-btn {
    width: auto; /* Shrinks to fit content on tablet/desktop */
    flex-shrink: 0;
  }

  .uk-footer__main-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .uk-footer__newsletter-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .uk-newsletter-content {
    max-width: 50%;
  }

  .uk-footer__main-grid {
    grid-template-columns: 2fr 1fr 1fr; /* Brand gets more space, links get 1 fraction each */
    gap: 4rem;
  }

  .uk-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ========================================================
   CONTACT SECTION WRAPPER
   ======================================================== */
.uk-contact-section {
  padding: 4rem 0 6rem 0;
  background-color: #ffffff;
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

/* ========================================================
   LEFT PANEL: INFO & CONTEXT
   ======================================================== */
.uk-contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.uk-contact-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
  margin: 1rem 0 1.25rem 0;
  letter-spacing: -0.02em;
}

.uk-contact-desc {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  max-width: 500px;
}

/* Checklist */
.uk-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

/* Custom Spaced Divider */
.uk-divider--spaced {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid #e5e7eb;
  width: 100%;
}

/* Methods Grid (2x2) */
.uk-contact-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}

.uk-method {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.uk-method__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #e0f2fe; /* Unified soft blue */
  color: #0085ca; /* Brand Blue */
  border-radius: 12px;
  flex-shrink: 0;
}

.uk-method__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.uk-method__text strong {
  color: #111827;
  font-size: 1rem;
}

.uk-method__text span {
  color: #6b7280;
  font-size: 0.9375rem;
}

/* ========================================================
   RIGHT PANEL: FORM & SUCCESS STATES
   ======================================================== */
.uk-contact-action {
  width: 100%;
}

/* Active Form Card */
.uk-contact-card {
  background-color: #f9fafb; /* Soft grey helps the form stand out */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.uk-contact-card__header {
  margin-bottom: 2rem;
}

.uk-contact-card__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.uk-contact-card__desc {
  margin: 0;
  color: #6b7280;
  font-size: 0.9375rem;
}

.uk-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Success State */
.uk-contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #f0fdf4; /* Success Green tint */
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  padding: 4rem 2rem;
}

.uk-contact-success__icon {
  background-color: #22c55e;
  color: #ffffff;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.2);
}

.uk-contact-success__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #14532d;
  margin: 0 0 0.75rem 0;
}

.uk-contact-success__desc {
  color: #166534;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  max-width: 400px;
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-contact-methods {
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablet */
  }

  .uk-form-row {
    grid-template-columns: 1fr 1fr; /* Name and Email side by side */
  }
}

@media (min-width: 1024px) {
  .uk-contact-layout {
    grid-template-columns: 1fr 1fr; /* 50/50 split layout on desktop */
    gap: 4rem;
  }

  .uk-contact-card {
    padding: 3rem;
  }
}

/* ========================================================
   FAQ SECTION WRAPPER
   ======================================================== */
.uk-faq-section {
  padding: 4rem 0 6rem 0;
  background-color: #f9fafb;
}

.uk-faq-header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uk-badge--blue {
  background-color: #e0f2fe;
  color: #0085ca;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.uk-faq-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ========================================================
   FAQ CARDS
   ======================================================== */
.uk-faq-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.uk-faq-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.uk-faq-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e0f2fe; /* Trust Blue */
  color: #0085ca;
  border-radius: 8px;
  flex-shrink: 0;
}

.uk-faq-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

/* ========================================================
   ACCORDION ITEMS
   ======================================================== */
.uk-faq-list {
  display: flex;
  flex-direction: column;
}

.uk-faq-item {
  border-bottom: 1px solid #f3f4f6;
}

.uk-faq-item:last-child {
  border-bottom: none;
}

.uk-faq-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.uk-faq-btn:hover {
  background-color: #f9fafb;
  color: #111827;
}

/* Focus State for Accessibility */
.uk-faq-btn:focus-visible {
  outline: 3px solid #ffd100;
  outline-offset: -3px;
  background-color: #f9fafb;
}

.uk-chevron {
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active Button State */
.uk-faq-item.is-active .uk-faq-btn {
  color: #0085ca;
  background-color: #f0f9ff;
}

.uk-faq-item.is-active .uk-chevron {
  transform: rotate(180deg);
  color: #0085ca;
}

/* Modern CSS Grid Accordion Animation */
.uk-faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.uk-faq-item.is-active .uk-faq-content {
  grid-template-rows: 1fr;
}

.uk-faq-inner {
  overflow: hidden;
  padding: 0 1.5rem; /* Horizontal padding remains constant */
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.6;
}

/* Add vertical padding only when open so it doesn't affect closed state height */
.uk-faq-item.is-active .uk-faq-inner {
  padding-bottom: 1.5rem;
  padding-top: 0.5rem;
}

/* ========================================================
   RESPONSIVE DESIGN (Desktop)
   ======================================================== */
@media (min-width: 1024px) {
  .uk-faq-grid {
    grid-template-columns: 1fr 1fr; /* 50/50 split on desktop */
    gap: 3rem;
  }
}

/* ========================================================
   AUTHENTICATION SECTION WRAPPER
   ======================================================== */
.uk-auth-section {
  padding: 4rem 0 6rem 0;
  background-color: #f9fafb;
  min-height: 80vh;
  display: flex;
  align-items: center; /* Vertically centers the content */
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* ========================================================
   LEFT PANEL: INFO & BENEFITS
   ======================================================== */
.uk-auth-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.uk-auth-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
  margin: 1rem 0 1rem 0;
  letter-spacing: -0.02em;
}

.uk-auth-desc {
  color: #4b5563;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 2.5rem 0;
  max-width: 500px;
}

/* Perks List */
.uk-perk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uk-perk-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.uk-perk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #e0f2fe; /* Trust Blue */
  color: #0085ca;
  border-radius: 12px;
  flex-shrink: 0;
}

.uk-perk-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.uk-perk-text strong {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
}

.uk-perk-text span {
  color: #6b7280;
  font-size: 0.9375rem;
}

/* ========================================================
   RIGHT PANEL: FORM CARD
   ======================================================== */
.uk-auth-card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.uk-auth-card {
  width: 100%;
  max-width: 440px; /* Constrains form width for better readability */
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

.uk-auth-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.uk-auth-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.uk-auth-card__subtitle {
  color: #6b7280;
  font-size: 0.9375rem;
  margin: 0;
}

/* Form Elements */
.uk-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.uk-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.uk-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.uk-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.uk-required {
  color: #d4351c;
}

/* Utility Links */
.uk-link-muted {
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.uk-link-muted:hover {
  color: #0085ca;
  text-decoration: underline;
}

.uk-text-small {
  font-size: 0.8125rem;
}

/* Inputs */
.uk-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
}

.uk-input:focus {
  border-color: #0085ca;
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.2);
}

/* Divider */
.uk-auth-divider {
  position: relative;
  text-align: center;
  margin: 2rem 0;
}

.uk-auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
  z-index: 1;
}

.uk-auth-divider span {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  padding: 0 1rem;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Register Area */
.uk-auth-register {
  margin-top: 0.5rem;
}

/* ========================================================
   RESPONSIVE LAYOUT (Desktop)
   ======================================================== */
@media (min-width: 1024px) {
  .uk-auth-layout {
    grid-template-columns: 1fr 1fr; /* 50/50 split on desktop */
    gap: 4rem;
  }

  .uk-auth-card-wrapper {
    justify-content: flex-end; /* Pushes card to the right on large screens */
  }

  .uk-auth-card {
    padding: 3rem 2.5rem;
  }
}

/* =====================================================
   AUTH / LOGIN SECTION — VIBRANT BERRY UI
===================================================== */

/* =========================================
   NEXT-GEN AUTH TERMINAL (CYBER-MIDNIGHT)
   ========================================= */

.ath-portal-realm {
  background-color: #020617; /* Deep Midnight */
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Background Cyber-Grid & Ambient Orb */
.ath-portal-realm::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

.ath-ambient-glow {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.15) 0%,
    transparent 60%
  );
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}

.ath-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 5;
  width: 100%;
}

/* The Split Layout */
.ath-split-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* --- Left Side: System Info --- */
.ath-info-node {
  display: flex;
  flex-direction: column;
}

.ath-sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 212, 191, 0.1);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.2);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  align-self: flex-start;
}

.ath-headline {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
}

.ath-text-glow {
  background: linear-gradient(135deg, #60a5fa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ath-lead-desc {
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 3rem 0;
  max-width: 90%;
}

/* Benefits Checklist */
.ath-perk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ath-perk-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ath-perk-icon {
  width: 48px;
  height: 48px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}

.ath-perk-text strong {
  display: block;
  color: #e2e8f0;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.ath-perk-text span {
  display: block;
  color: #64748b;
  font-size: 0.9rem;
}

/* --- Right Side: The Glass Terminal (Form) --- */
.ath-terminal-glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

/* Top Neon Line on Terminal */
.ath-terminal-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #2dd4bf);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.ath-form-head {
  margin-bottom: 2.5rem;
}

.ath-form-head h3 {
  color: #f8fafc;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.ath-form-head p {
  color: #94a3b8;
  margin: 0;
  font-size: 0.95rem;
}

/* Inputs */
.ath-input-stack {
  margin-bottom: 1.5rem;
}

.ath-label {
  display: block;
  color: #cbd5e1;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ath-req-mark {
  color: #f43f5e;
}

.ath-input-field {
  width: 100%;
  background: #0f172a;
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.ath-input-field::placeholder {
  color: #475569;
}

.ath-input-field:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
  background: #1e293b;
}

/* Buttons */
.ath-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #020617;
  padding: 1.2rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.ath-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3);
  color: #fff;
}

/* Divider & Secondary Actions */
.ath-line-break {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
  color: #64748b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ath-line-break::before,
.ath-line-break::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ath-line-break::before {
  margin-right: 1rem;
}
.ath-line-break::after {
  margin-left: 1rem;
}

.ath-secondary-zone {
  text-align: center;
}

.ath-secondary-zone p {
  color: #94a3b8;
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}

.ath-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.ath-btn-outline:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: #3b82f6;
  color: #38bdf8;
}

/* Responsive */
@media (max-width: 1024px) {
  .ath-split-core {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .ath-info-node {
    text-align: center;
    align-items: center;
  }
  .ath-sys-badge {
    align-self: center;
  }
  .ath-perk-list {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .ath-terminal-glass {
    padding: 2rem;
  }
}

/* =========================================
   NEXT-GEN AUTH TERMINAL (CYBER-MIDNIGHT)
   ========================================= */

.ath-portal-realm {
  background-color: #020617;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Background Cyber-Grid & Ambient Orb */
.ath-portal-realm::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

.ath-ambient-glow {
  position: absolute;
  top: 50%;
  left: 10%; /* Shifted to the left for the register page to balance visual weight */
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.12) 0%,
    transparent 60%
  );
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}

.ath-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 5;
  width: 100%;
}

.ath-split-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Left Side: System Info */
.ath-info-node {
  display: flex;
  flex-direction: column;
}

.ath-sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 212, 191, 0.1);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.2);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  align-self: flex-start;
}

.ath-headline {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
}

.ath-text-glow {
  background: linear-gradient(135deg, #60a5fa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ath-lead-desc {
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 3rem 0;
  max-width: 90%;
}

/* Benefits Checklist */
.ath-perk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ath-perk-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ath-perk-icon {
  width: 48px;
  height: 48px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}

.ath-perk-text strong {
  display: block;
  color: #e2e8f0;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.ath-perk-text span {
  display: block;
  color: #64748b;
  font-size: 0.9rem;
}

/* Right Side: The Glass Terminal */
.ath-terminal-glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

.ath-terminal-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #2dd4bf);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.ath-form-head {
  margin-bottom: 2.5rem;
}
.ath-form-head h3 {
  color: #f8fafc;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.ath-form-head p {
  color: #94a3b8;
  margin: 0;
  font-size: 0.95rem;
}

/* Inputs */
.ath-input-stack {
  margin-bottom: 1.5rem;
}
.ath-label {
  display: block;
  color: #cbd5e1;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ath-req-mark {
  color: #f43f5e;
}

.ath-input-field {
  width: 100%;
  background: #0f172a;
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.ath-input-field::placeholder {
  color: #475569;
}
.ath-input-field:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
  background: #1e293b;
}

/* Buttons */
.ath-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #020617;
  padding: 1.2rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.ath-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3);
  color: #fff;
}

/* Dividers & Secondary CTA */
.ath-line-break {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
  color: #64748b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ath-line-break::before,
.ath-line-break::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ath-line-break::before {
  margin-right: 1rem;
}
.ath-line-break::after {
  margin-left: 1rem;
}

.ath-secondary-zone {
  text-align: center;
}
.ath-secondary-zone p {
  color: #94a3b8;
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}

.ath-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.ath-btn-outline:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: #3b82f6;
  color: #38bdf8;
}

/* Responsive */
@media (max-width: 1024px) {
  .ath-split-core {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .ath-info-node {
    text-align: center;
    align-items: center;
  }
  .ath-sys-badge {
    align-self: center;
  }
  .ath-perk-list {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .ath-terminal-glass {
    padding: 2rem;
  }
}

/* ========================================================
   DASHBOARD SECTION & LAYOUT
   ======================================================== */
.uk-dashboard-section {
  padding: 3rem 0 5rem 0;
  background-color: #f9fafb; /* Soft grey background for account area */
  min-height: 80vh;
}

.uk-dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* ========================================================
   SIDEBAR
   ======================================================== */
.uk-dash-sidebar {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.uk-user-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.uk-user-avatar {
  width: 48px;
  height: 48px;
  background-color: #0085ca; /* Brand Blue */
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
}

.uk-user-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevents long emails from breaking layout */
}

.uk-user-name {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.uk-user-email {
  color: #6b7280;
  font-size: 0.875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Navigation */
.uk-dash-nav {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.uk-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.uk-nav-link svg {
  color: #9ca3af;
  transition: color 0.2s ease;
}

.uk-nav-link:hover,
.uk-nav-link:focus-visible {
  background-color: #f9fafb;
  color: #111827;
}

.uk-nav-link:hover svg,
.uk-nav-link:focus-visible svg {
  color: #0085ca;
}

.uk-nav-link.is-active {
  background-color: #f0f9ff; /* Soft Blue */
  color: #0085ca;
  border-left-color: #0085ca;
  font-weight: 600;
}

.uk-nav-link.is-active svg {
  color: #0085ca;
}

.uk-nav-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0.5rem 0;
}

/* Logout styling */
.uk-nav-link--danger:hover {
  background-color: #fef2f2;
  color: #d4351c;
}
.uk-nav-link--danger:hover svg {
  color: #d4351c;
}

/* ========================================================
   MAIN DASHBOARD AREA
   ======================================================== */
.uk-dash-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.uk-dash-header {
  margin-bottom: 1rem;
}

.uk-dash-headline {
  margin: 0 0 0.5rem 0;
  font-size: 2.25rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.uk-text-highlight {
  color: #0085ca;
}

.uk-dash-desc {
  color: #4b5563;
  font-size: 1.05rem;
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.uk-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* ========================================================
   PANELS & CARDS (Reused styles + extensions)
   ======================================================== */
.uk-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.uk-panel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.uk-panel__icon {
  color: #0085ca;
  display: flex;
}

.uk-panel__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}

.uk-panel__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-panel__body--no-pad {
  padding: 0;
  gap: 0;
}

/* Info Rows */
.uk-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
}

.uk-info-label {
  color: #6b7280;
}

.uk-info-val {
  color: #111827;
  font-weight: 600;
}

/* Quick Action Rows */
.uk-action-row {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.uk-action-row:last-child {
  border-bottom: none;
}

.uk-action-row:hover,
.uk-action-row:focus-visible {
  background-color: #f9fafb;
  outline: none;
}

.uk-action-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e0f2fe;
  color: #0085ca;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 1rem;
}

.uk-action-row__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uk-action-row__text strong {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
}

.uk-action-row__text span {
  color: #6b7280;
  font-size: 0.875rem;
}

.uk-action-row__arrow {
  color: #9ca3af;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.uk-action-row:hover .uk-action-row__arrow {
  color: #0085ca;
  transform: translateX(4px);
}

/* ========================================================
   ALERTS
   ======================================================== */
.uk-alert--info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #eff6ff; /* Soft info blue */
  border-left: 4px solid #3b82f6;
  padding: 1.25rem;
  border-radius: 6px;
  color: #1e3a8a;
}

.uk-alert__icon {
  flex-shrink: 0;
  color: #3b82f6;
}

.uk-alert__content strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #1e40af;
}

.uk-alert__content p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-dash-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns for the cards on tablet */
  }
}

@media (min-width: 1024px) {
  .uk-dashboard-layout {
    grid-template-columns: 280px 1fr; /* Sidebar is 280px, main content takes the rest */
    gap: 3rem;
  }

  .uk-dash-headline {
    font-size: 2.5rem;
  }
}

/* ========================================================
   TRACK SECTION WRAPPER
   ======================================================== */
.uk-track-section {
  padding: 4rem 0 6rem 0;
  background-color: #f9fafb;
  min-height: 80vh;
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-track-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

/* ========================================================
   INPUT CARD
   ======================================================== */
.uk-track-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.uk-track-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.uk-track-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #e0f2fe;
  color: #0085ca;
  border-radius: 16px;
  margin-bottom: 1rem;
}

.uk-track-card__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.uk-track-card__desc {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Tracking Search Row */
.uk-track-action-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-input-with-icon {
  position: relative;
  flex-grow: 1;
}

.uk-input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #9ca3af;
  display: flex;
}

.uk-input--pl {
  padding-left: 3rem !important;
}

/* ========================================================
   RESULTS & BANNERS
   ======================================================== */
.uk-track-results {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uk-status-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid transparent;
}

.uk-status-banner--processing {
  background-color: #f0f9ff;
  border-color: #bae6fd;
}

.uk-status-banner--dispatched {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.uk-status-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uk-status-banner--processing .uk-status-banner__icon {
  background-color: #0085ca;
  color: #ffffff;
}

.uk-status-banner--dispatched .uk-status-banner__icon {
  background-color: #22c55e;
  color: #ffffff;
}

.uk-status-banner__info strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.25rem;
}

.uk-status-banner__info p {
  margin: 0;
  color: #4b5563;
  line-height: 1.5;
}

/* Summary Card */
.uk-track-summary {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
}

.uk-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uk-summary-label {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

.uk-summary-val {
  color: #111827;
  font-weight: 700;
}

.uk-mt-lg {
  margin-top: 1.5rem;
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-track-action-row {
    flex-direction: row; /* Horizontal input/button */
  }

  .uk-track-card {
    padding: 3rem;
  }
}

/* ========================================================
   RETURN SECTION WRAPPER
   ======================================================== */
.uk-return-section {
  padding: 4rem 0 6rem 0;
  background-color: #f9fafb;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.uk-return-wrapper {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

/* ========================================================
   SUCCESS STATE
   ======================================================== */
.uk-return-success {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uk-return-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #d1fae5; /* Soft success green */
  color: #059669; /* Deep success green */
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.15);
}

.uk-return-success__title {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

.uk-text-success {
  color: #059669;
}

.uk-return-success__desc {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
}

.uk-return-summary {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.uk-summary-label {
  color: #6b7280;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uk-summary-value {
  color: #111827;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ========================================================
   FORM STATE (CARD)
   ======================================================== */
.uk-return-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.uk-return-card__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.uk-return-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #e0f2fe; /* Trust Blue */
  color: #0085ca;
  border-radius: 16px;
  margin-bottom: 1rem;
}

.uk-return-card__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.uk-return-card__desc {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

/* ========================================================
   FORM ELEMENTS
   ======================================================== */
.uk-return-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uk-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.uk-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.uk-required {
  color: #d4351c; /* Standard Accessible Red */
}

.uk-text-muted {
  color: #9ca3af;
  font-weight: 400;
}

/* Inputs & Textarea */
.uk-input,
.uk-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
}

.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
  border-color: #0085ca;
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.2);
}

.uk-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Custom Select Dropdown */
.uk-select-wrapper {
  position: relative;
  width: 100%;
}

.uk-select {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  appearance: none; /* Removes native OS styling */
  outline: none;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Style the placeholder option differently if needed */
.uk-select:invalid {
  color: #6b7280;
}

.uk-select-arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none; /* Clicks pass through to the select element */
  display: flex;
}

/* ========================================================
   ALERTS & NOTES
   ======================================================== */
.uk-alert--danger {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #fef2f2;
  border-left: 4px solid #d4351c;
  padding: 1.25rem;
  border-radius: 6px;
  color: #991b1b;
}

.uk-alert__icon {
  flex-shrink: 0;
  color: #d4351c;
}

.uk-alert__content strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #7f1d1d;
}

.uk-alert__content p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Policy Note */
.uk-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.uk-policy-note svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ========================================================
   RESPONSIVE LAYOUT (Desktop)
   ======================================================== */
@media (min-width: 768px) {
  .uk-return-card {
    padding: 3.5rem;
  }
}

/* ========================================================
   CART SECTION WRAPPER
   Grey background makes the white summary/item boxes pop.
   ======================================================== */
.uk-cart-section {
  padding: 3rem 0 5rem 0;
  background-color: #f9fafb;
  min-height: 60vh;
}

/* ========================================================
   EMPTY STATE
   ======================================================== */
.uk-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  padding: 4rem 2rem;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  margin: 0 auto;
}

.uk-cart-empty__icon-wrapper {
  background: #f3f4f6;
  color: #9ca3af;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.uk-cart-empty__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.75rem 0;
}

.uk-cart-empty__desc {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

.uk-cart-empty__btn {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* ========================================================
   CART LAYOUT (Split Desktop Grid)
   ======================================================== */
.uk-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.uk-cart-title {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.02em;
}

/* ========================================================
   CART ITEMS LIST
   ======================================================== */
.uk-cart-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.uk-cart-item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  gap: 1rem;
}

.uk-cart-item:last-child {
  border-bottom: none;
}

.uk-cart-item__media {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: #f9fafb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-decoration: none;
}

.uk-cart-item__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.uk-cart-item__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-cart-item__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.uk-cart-item__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.uk-cart-item__name a {
  color: #111827;
  text-decoration: none;
  transition: color 0.2s ease;
}

.uk-cart-item__name a:hover {
  color: #0085ca;
}

.uk-cart-item__unit-price {
  font-weight: 600;
  color: #4b5563;
  font-size: 0.875rem;
}

/* Typography Utility */
.uk-text-muted {
  color: #6b7280;
  font-weight: 400;
}

/* ========================================================
   CONTROLS (Qty & Remove)
   ======================================================== */
.uk-cart-item__controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.uk-qty-group {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  height: 36px;
}

.uk-qty-group:focus-within {
  border-color: #0085ca;
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.2);
}

.uk-qty-input {
  width: 50px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  color: #111827;
  -moz-appearance: textfield;
  outline: none;
}

.uk-qty-input::-webkit-outer-spin-button,
.uk-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.uk-qty-btn {
  height: 100%;
  background: #f3f4f6;
  border: none;
  border-left: 1px solid #d1d5db;
  color: #4b5563;
  padding: 0 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.uk-qty-btn:hover {
  background: #e5e7eb;
  color: #111827;
}

/* Remove Button */
.uk-btn-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: #d4351c; /* Accessible Red */
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
  font-family: inherit;
}

.uk-btn-remove:hover {
  color: #a52a2a;
  text-decoration: underline;
}

/* ========================================================
   ITEM TOTAL
   ======================================================== */
.uk-cart-item__total-wrapper {
  text-align: left;
}

.uk-cart-item__total {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}

/* ========================================================
   SIDEBAR / ORDER SUMMARY
   ======================================================== */
.uk-cart-sidebar {
  position: sticky;
  top: 100px; /* Sticks just below your fixed header */
}

.uk-summary-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.uk-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1.25rem 0;
}

.uk-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #111827;
}

.uk-summary-val {
  font-weight: 600;
}

.uk-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.25rem 0;
}

.uk-summary-row--total {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.uk-total-highlight {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
}

/* Checkout Button Utility */
.uk-btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 1rem;
  font-size: 1.125rem;
}

.uk-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: #059669; /* Trust Green */
  font-size: 0.8125rem;
  font-weight: 600;
}

.uk-accepted-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  opacity: 0.6;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-cart-item {
    flex-direction: row;
    align-items: center;
  }

  .uk-cart-item__total-wrapper {
    text-align: right;
    min-width: 100px;
  }
}

@media (min-width: 1024px) {
  .uk-cart-layout {
    grid-template-columns: 1fr 380px; /* Fixed width sidebar, fluid cart items */
    gap: 3rem;
  }

  .uk-cart-item {
    padding: 2rem;
  }
}

/* ========================================================
   CHECKOUT WRAPPER & ALERTS
   ======================================================== */
.uk-checkout-section {
  padding: 3rem 0 5rem 0;
  background-color: #f9fafb;
  min-height: 70vh;
}

.uk-alert--danger {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #fef2f2;
  border-left: 4px solid #d4351c; /* Standard accessible red */
  padding: 1.25rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  color: #991b1b;
}

.uk-alert__icon {
  flex-shrink: 0;
  color: #d4351c;
}

.uk-alert__content strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #7f1d1d;
}

.uk-alert__content p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.uk-checkout-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ========================================================
   PANELS & FORMS
   ======================================================== */
.uk-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.uk-panel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.uk-panel__icon {
  color: #0085ca;
  display: flex;
}

.uk-panel__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.uk-panel__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Form Inputs */
.uk-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.uk-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.uk-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
}

.uk-required {
  color: #d4351c;
}

/* Min-height prevents iOS input zoom */
.uk-input,
.uk-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
}

.uk-input:focus,
.uk-textarea:focus {
  border-color: #0085ca;
  box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.2);
}

.uk-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ========================================================
   PAYMENT METHOD CARDS
   ======================================================== */
.uk-payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.uk-pay-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.2s ease;
  user-select: none;
}

.uk-pay-card:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.uk-pay-card.is-active {
  border-color: #0085ca;
  background: #f0f9ff;
}

.uk-pay-card__icon {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #4b5563;
}

.uk-pay-card.is-active .uk-pay-card__icon {
  border-color: #0085ca;
  color: #0085ca;
}

.uk-pay-card__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uk-pay-card__info strong {
  font-size: 1rem;
  color: #111827;
  margin-bottom: 0.15rem;
}

.uk-pay-card__info span {
  font-size: 0.875rem;
  color: #6b7280;
}

.uk-pay-card__check {
  color: #0085ca;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.uk-pay-card.is-active .uk-pay-card__check {
  opacity: 1;
  transform: scale(1);
}

/* ========================================================
   ORDER SUMMARY SIDEBAR
   ======================================================== */
.uk-checkout-sidebar {
  position: sticky;
  top: 100px;
}

.uk-summary-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.uk-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.uk-summary-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.uk-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.9375rem;
}

.uk-summary-item__details {
  display: flex;
  flex-direction: column;
}

.uk-summary-item__name {
  color: #111827;
  font-weight: 500;
}

.uk-summary-item__qty {
  color: #6b7280;
  font-size: 0.8125rem;
}

.uk-summary-item__price {
  color: #111827;
}

.uk-summary-calc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.uk-calc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  color: #4b5563;
}

.uk-text-bold {
  font-weight: 600;
  color: #111827;
}
.uk-text-success {
  font-weight: 600;
  color: #00703c;
} /* UK Green */

.uk-calc-row--total {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  align-items: center;
}

.uk-total-amount {
  font-size: 1.5rem;
  font-weight: 800;
}

.uk-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: #059669;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-form-row {
    grid-template-columns: 1fr 1fr; /* Inputs side by side */
  }
}

@media (min-width: 1024px) {
  .uk-checkout-layout {
    grid-template-columns: 1fr 400px; /* Fixed width sidebar */
    gap: 3rem;
  }
}

/* ========================================================
   SUCCESS SECTION WRAPPER
   ======================================================== */
.uk-success-section {
  padding: 4rem 0 6rem 0;
  background-color: #f9fafb;
  min-height: 80vh;
}

/* ========================================================
   HEADER AREA
   ======================================================== */
.uk-success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 3.5rem;
}

.uk-success-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #d1fae5; /* Soft success green */
  color: #059669; /* Deep success green */
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.15);
}

.uk-success-headline {
  font-size: 2.5rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.02em;
}

.uk-text-success {
  color: #059669; /* Deep green for emphasis */
}

.uk-success-desc {
  font-size: 1.125rem;
  color: #4b5563;
  margin: 0;
  max-width: 500px;
}

.uk-order-number {
  color: #111827;
  font-weight: 700;
}

/* ========================================================
   LAYOUT GRID
   ======================================================== */
.uk-success-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.uk-success-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ========================================================
   PAYMENT STATUS & STATS
   ======================================================== */
.uk-payment-status {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: #f9fafb;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.uk-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uk-status-icon--blue {
  background-color: #e0f2fe;
  color: #0085ca;
}
.uk-status-icon--grey {
  background-color: #e5e7eb;
  color: #4b5563;
}

.uk-status-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.uk-status-text strong {
  font-size: 1.05rem;
  color: #111827;
}

.uk-status-text p {
  margin: 0;
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Stats Grid */
.uk-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.uk-stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.uk-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
}

.uk-stat-value {
  font-size: 1rem;
  color: #111827;
}

/* ========================================================
   NEXT STEPS LIST
   ======================================================== */
.uk-next-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-step-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  color: #4b5563;
  font-weight: 500;
}

.uk-step-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #e0f2fe;
  color: #0085ca;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ========================================================
   CALL TO ACTIONS
   ======================================================== */
.uk-success-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ========================================================
   TIMELINE (Order Progress)
   ======================================================== */
.uk-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1.5rem; /* Space for the vertical line */
}

/* The vertical connecting line */
.uk-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 30px; /* Don't draw line past the last item */
  left: 27px; /* Aligns exactly with the center of the indicator circles */
  width: 2px;
  background-color: #e5e7eb;
  z-index: 1;
}

.uk-timeline__step {
  position: relative;
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2rem;
  z-index: 2; /* Sits above the vertical line */
}

.uk-timeline__step:last-child {
  margin-bottom: 0;
}

.uk-timeline__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.uk-timeline__step.is-active .uk-timeline__indicator {
  background-color: #0085ca;
  border-color: #0085ca;
  color: #ffffff;
}

.uk-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.uk-timeline__content strong {
  font-size: 1rem;
  color: #111827;
}

.uk-timeline__content span {
  font-size: 0.875rem;
  color: #6b7280;
}

/* ========================================================
   HELP CARD
   ======================================================== */
.uk-help-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.uk-help-card__icon {
  color: #0085ca;
  flex-shrink: 0;
}

.uk-help-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9375rem;
}

.uk-help-card__content strong {
  color: #111827;
  font-size: 1rem;
}

.uk-help-card__content p {
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}

.uk-help-card__content a {
  color: #0085ca;
  text-decoration: none;
  font-weight: 600;
}

.uk-help-card__content span {
  color: #4b5563;
  font-weight: 500;
}

/* ========================================================
   RESPONSIVE SCALING (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-stats-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
  }

  .uk-success-actions {
    flex-direction: row; /* Buttons side-by-side */
  }
}

@media (min-width: 1024px) {
  .uk-success-layout {
    grid-template-columns: 1fr 380px; /* Fixed width sidebar for tracker */
    gap: 3rem;
  }
}

/* Policy Pages */
.policy-page {
  padding: 50px;
}

/* ========================================================
   SHOP SECTION WRAPPER
   ======================================================== */
.uk-shop-section {
  padding: 3rem 0 5rem 0;
  background-color: #ffffff;
}

/* ========================================================
   EMPTY STATE
   ======================================================== */
.uk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.uk-empty-state__icon-wrapper {
  color: #9ca3af;
  margin-bottom: 1.5rem;
  background: #ffffff;
  padding: 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.uk-empty-state__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 0.75rem 0;
}

.uk-text-highlight {
  color: #0085ca; /* Brand Blue */
}

.uk-empty-state__desc {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
}

/* ========================================================
   PRODUCT GRID
   ======================================================== */
.uk-shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* ========================================================
   PRODUCT CARD
   ======================================================== */
.uk-shop-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.uk-shop-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* Greyed out out-of-stock state */
.uk-shop-card.is-out-of-stock .uk-shop-card__img {
  opacity: 0.6;
  filter: grayscale(100%);
}

/* --- Visual Media Section --- */
.uk-shop-card__media {
  position: relative;
  background-color: #f9fafb; /* Soft grey highlights hardware */
  border-bottom: 1px solid #f3f4f6;
  aspect-ratio: 1 / 1; /* Perfect square for grid consistency */
}

.uk-shop-card__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.uk-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.uk-tag--success {
  background-color: #00703c; /* UK standard accessible green */
}

.uk-tag--danger {
  background-color: #d4351c; /* UK standard accessible red */
}

.uk-shop-card__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  position: relative;
}

.uk-shop-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  mix-blend-mode: darken;
}

/* Hover Overlay */
.uk-shop-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4); /* Dark translucent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.uk-shop-card:hover .uk-shop-card__overlay {
  opacity: 1;
}

.uk-shop-card:hover .uk-shop-card__img {
  transform: scale(1.05); /* Slight zoom on image behind overlay */
}

.uk-btn-ghost {
  background-color: #ffffff;
  color: #111827;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.uk-shop-card:hover .uk-btn-ghost {
  transform: translateY(0);
}

/* --- Card Info --- */
.uk-shop-card__info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uk-shop-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.uk-stars {
  display: flex;
  gap: 0.1rem;
}

.uk-text-muted {
  color: #6b7280;
  font-size: 0.8125rem;
}

.uk-shop-card__title-link {
  text-decoration: none;
  color: #111827;
}

.uk-shop-card__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  /* Ensure titles don't break grid alignment */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.uk-shop-card__title-link:hover .uk-shop-card__title {
  color: #0085ca;
}

.uk-shop-card__desc {
  color: #6b7280;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
  /* Clamps text to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uk-shop-card__price {
  margin-top: auto;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
}

/* --- Footer / Buttons --- */
.uk-shop-card__footer {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.uk-shop-form {
  margin: 0;
}

.uk-btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0.875rem 1rem;
}

.uk-btn--disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  border: 1px solid #d1d5db;
  cursor: not-allowed;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop Grid)
   ======================================================== */
@media (min-width: 640px) {
  .uk-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .uk-shop-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 wide on desktop */
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .uk-shop-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 wide on large monitors */
  }
}

/* ========================================================
   PDP SECTION WRAPPER
   ======================================================== */
.uk-pdp-section {
  padding: 3rem 0 5rem 0;
  background-color: #ffffff;
}

/* ========================================================
   TOP GRID LAYOUT
   ======================================================== */
.uk-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* Left: Image Gallery */
.uk-pdp-gallery-wrapper {
  position: relative;
}

.uk-pdp-gallery {
  position: sticky;
  top: 100px; /* Sticks beneath header */
  background-color: #f9fafb; /* Soft grey highlights hardware */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.uk-pdp-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
  transition: transform 0.3s ease;
}

.uk-pdp-gallery:hover .uk-pdp-img {
  transform: scale(1.05); /* Subtle zoom on hover */
}

/* Right: Product Info */
.uk-pdp-info {
  display: flex;
  flex-direction: column;
}

.uk-pdp-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.uk-badge--blue {
  background-color: #e0f2fe;
  color: #0085ca;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uk-pdp-meta-divider {
  color: #d1d5db;
}

.uk-pdp-category {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uk-pdp-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

/* Reviews & Stock Status */
.uk-pdp-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.uk-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.uk-stars {
  display: flex;
  gap: 0.1rem;
}

.uk-rating-text {
  color: #4b5563;
  font-size: 0.9375rem;
  font-weight: 500;
}

.uk-stock-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.9375rem;
}

.uk-text-success {
  color: #00703c;
} /* UK standard green */
.uk-text-danger {
  color: #d4351c;
} /* UK standard red */

/* Price */
.uk-pdp-price-wrap {
  margin-bottom: 1.5rem;
}

.uk-pdp-price {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
}

.uk-pdp-tax-note {
  margin: 0.25rem 0 0 0;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Description & Highlights */
.uk-pdp-desc {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.uk-pdp-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.uk-pdp-highlights li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: #111827;
  font-weight: 500;
}

.uk-pdp-highlights svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Actions & Buttons */
.uk-pdp-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.uk-pdp-form {
  width: 100%;
  margin: 0;
}

.uk-btn--lg {
  padding: 1.125rem 2rem;
  font-size: 1.125rem;
}

/* Trust Banner */
.uk-trust-banner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
}

.uk-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.9375rem;
}

.uk-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0085ca;
  width: 24px;
  height: 24px;
}

/* ========================================================
   CSS-ONLY TABS SECTION
   ======================================================== */
.uk-tabs-container {
  border-top: 1px solid #e5e7eb;
  padding-top: 3rem;
}

/* Hide the functionality radios completely */
.uk-tab-radio {
  display: none;
}

/* Tab Headers */
.uk-tabs-header {
  display: flex;
  gap: 2rem;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 2.5rem;
  white-space: nowrap;
  padding-bottom: 2px;
}

.uk-tab-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: #6b7280;
  padding: 0 0 1rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.uk-tab-label:hover {
  color: #111827;
}

/* The Animated Underline */
.uk-tab-label::after {
  content: "";
  position: absolute;
  bottom: -4px; /* Pulls it over the grey border */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0085ca;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* CSS Tab Logic: When a radio is checked, style its corresponding label */
#tab_overview:checked ~ .uk-tabs-header [for="tab_overview"],
#tab_specs:checked ~ .uk-tabs-header [for="tab_specs"],
#tab_network:checked ~ .uk-tabs-header [for="tab_network"],
#tab_logistics:checked ~ .uk-tabs-header [for="tab_logistics"] {
  color: #111827;
}

#tab_overview:checked ~ .uk-tabs-header [for="tab_overview"]::after,
#tab_specs:checked ~ .uk-tabs-header [for="tab_specs"]::after,
#tab_network:checked ~ .uk-tabs-header [for="tab_network"]::after,
#tab_logistics:checked ~ .uk-tabs-header [for="tab_logistics"]::after {
  transform: scaleX(1);
}

/* Tab Panels */
.uk-tab-panel {
  display: none;
  animation: uk-fade-in 0.4s ease;
}

@keyframes uk-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CSS Tab Logic: When a radio is checked, show its panel */
#tab_overview:checked ~ .uk-tabs-body #panel_overview,
#tab_specs:checked ~ .uk-tabs-body #panel_specs,
#tab_network:checked ~ .uk-tabs-body #panel_network,
#tab_logistics:checked ~ .uk-tabs-body #panel_logistics {
  display: block;
}

/* Panel Content Styling */
.uk-panel-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1rem 0;
}

.uk-panel-text {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  max-width: 800px;
}

.uk-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.uk-feature-block {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.uk-feature-block strong {
  display: block;
  font-size: 1.125rem;
  color: #111827;
  margin-bottom: 0.5rem;
}

.uk-feature-block p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

/* Spec Tables */
.uk-spec-table {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  text-align: left;
}

.uk-spec-table th,
.uk-spec-table td {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.uk-spec-table th {
  background-color: #f9fafb;
  color: #111827;
  font-weight: 600;
  width: 35%;
}

.uk-spec-table td {
  color: #4b5563;
}

/* Box List */
.uk-box-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.uk-box-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: #111827;
  font-weight: 500;
}

.uk-box-list svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ========================================================
   RESPONSIVE DESIGN (Tablet & Desktop)
   ======================================================== */
@media (min-width: 640px) {
  .uk-pdp-actions {
    flex-direction: row; /* Buttons side by side */
  }

  .uk-trust-banner {
    flex-direction: row;
    justify-content: space-between;
  }

  .uk-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .uk-pdp-grid {
    grid-template-columns: 1fr 1fr; /* 50/50 split */
    gap: 4rem;
  }
}

.text-black {
  color: black !important;
}