/* ==========================================================================
   HIDPLANET.LV — JOOMLA / JOOMSHOPPING VISUAL REFERENCE
   --------------------------------------------------------------------------
   Plain CSS only. No Tailwind, no React, no JavaScript, no Next.js selectors.
   This file is a VISUAL reference for transferring the approved Hidplanet.lv
   design direction into a Joomla template + JoomShopping override layer.

   The approved design direction is FINAL. This file does not introduce any
   new design. Map the .hp-* class names below to your Joomla template
   positions and JoomShopping layout overrides.
   ========================================================================== */


/* ==========================================================================
   1. CSS VARIABLES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* --- Colors --- */
  --hp-background: #f2ede6;      /* warm page background          */
  --hp-header: #faf7f3;          /* top header surface            */
  --hp-nav: #f5f0e8;             /* navigation + muted surfaces   */
  --hp-card: #ffffff;            /* cards, panels                 */

  --hp-text: #2d2416;            /* primary text                  */
  --hp-text-secondary: #6b5b42;  /* secondary text                */
  --hp-text-muted: #9c8b72;      /* muted / meta text             */

  --hp-primary: #e87020;         /* accent orange (CTA)           */
  --hp-primary-hover: #c55c0a;   /* accent orange hover           */
  --hp-primary-foreground: #ffffff;

  --hp-border: #e2d9cc;          /* hairline borders              */
  --hp-success: #3f7a4f;         /* in-stock / success only       */
  --hp-error: #c0392b;           /* real validation errors only   */

  /* --- Typography --- */
  --hp-font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --hp-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --hp-fs-xs: 0.75rem;    /* 12px */
  --hp-fs-sm: 0.875rem;   /* 14px - minimum body size */
  --hp-fs-base: 1rem;     /* 16px */
  --hp-fs-lg: 1.125rem;   /* 18px */
  --hp-fs-xl: 1.5rem;     /* 24px */
  --hp-fs-2xl: 2rem;      /* 32px */
  --hp-fs-3xl: 2.75rem;   /* 44px - hero */

  --hp-fw-regular: 400;
  --hp-fw-medium: 500;
  --hp-fw-semibold: 600;
  --hp-fw-bold: 700;

  --hp-lh-body: 1.5;      /* body line-height (1.4-1.6 range) */
  --hp-lh-tight: 1.15;    /* headings */

  /* --- Spacing (Tailwind-derived scale) --- */
  --hp-space-1: 0.25rem;  /* 4px  */
  --hp-space-2: 0.5rem;   /* 8px  */
  --hp-space-3: 0.75rem;  /* 12px */
  --hp-space-4: 1rem;     /* 16px */
  --hp-space-6: 1.5rem;   /* 24px */
  --hp-space-8: 2rem;     /* 32px */
  --hp-space-12: 3rem;    /* 48px */
  --hp-space-16: 4rem;    /* 64px */

  /* --- Border radius --- */
  --hp-radius-sm: 0.3rem;
  --hp-radius: 0.5rem;    /* default card / button radius */
  --hp-radius-lg: 0.75rem;
  --hp-radius-full: 9999px;

  /* --- Borders --- */
  --hp-border-width: 1px;
  --hp-border-style: solid;

  /* --- Shadows (soft, restrained — premium catalog feel) --- */
  --hp-shadow-sm: 0 1px 2px rgba(45, 36, 22, 0.04);
  --hp-shadow: 0 1px 3px rgba(45, 36, 22, 0.06), 0 1px 2px rgba(45, 36, 22, 0.04);
  --hp-shadow-md: 0 4px 12px rgba(45, 36, 22, 0.08);

  /* --- Container widths --- */
  --hp-container-max: 80rem;   /* 1280px main content */
  --hp-container-pad: 1rem;    /* gutters on mobile   */
}


/* ==========================================================================
   2. BASE LAYOUT
   ========================================================================== */

body {
  margin: 0;
  background-color: var(--hp-background);
  color: var(--hp-text);
  font-family: var(--hp-font-sans);
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Page container — centers content, applies gutters */
.hp-container {
  width: 100%;
  max-width: var(--hp-container-max);
  margin-inline: auto;
  padding-inline: var(--hp-container-pad);
}

@media (min-width: 768px) {
  .hp-container {
    padding-inline: var(--hp-space-6);
  }
}

/* Vertical rhythm between major sections */
.hp-section {
  padding-block: var(--hp-space-12);
}

@media (min-width: 1024px) {
  .hp-section {
    padding-block: var(--hp-space-16);
  }
}

/* --- Typography hierarchy --- */
h1, .hp-h1 {
  font-size: var(--hp-fs-3xl);
  font-weight: var(--hp-fw-bold);
  line-height: var(--hp-lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2, .hp-h2 {
  font-size: var(--hp-fs-2xl);
  font-weight: var(--hp-fw-semibold);
  line-height: var(--hp-lh-tight);
  text-wrap: balance;
}

h3, .hp-h3 {
  font-size: var(--hp-fs-xl);
  font-weight: var(--hp-fw-semibold);
  line-height: var(--hp-lh-tight);
}

p, .hp-body {
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-body);
  color: var(--hp-text);
}

.hp-text-secondary { color: var(--hp-text-secondary); }
.hp-text-muted { color: var(--hp-text-muted); font-size: var(--hp-fs-sm); }

a {
  color: var(--hp-text);
  text-decoration: none;
}
a:hover { color: var(--hp-primary); }


/* ==========================================================================
   3. HEADER
   ========================================================================== */

/* Top header band */
.hp-site-header {
  background-color: var(--hp-header);
  border-bottom: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}

.hp-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--hp-space-4);
  min-height: 64px;
  padding-block: var(--hp-space-3);
}

/* Logo */
.hp-logo {
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  letter-spacing: -0.01em;
  color: var(--hp-text);
  white-space: nowrap;
}
.hp-logo__accent { color: var(--hp-primary); }

/* Search field */
.hp-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 36rem;
}
.hp-search__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--hp-space-4) 0 2.5rem; /* left pad for icon */
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text);
}
.hp-search__input::placeholder { color: var(--hp-text-muted); }
.hp-search__input:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px rgba(232, 112, 32, 0.15);
}
.hp-search__icon {
  position: absolute;
  left: var(--hp-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--hp-text-muted);
}

/* Language selector */
.hp-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-1);
  height: 40px;
  padding-inline: var(--hp-space-3);
  background: transparent;
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text-secondary);
  cursor: pointer;
}
.hp-lang:hover { border-color: var(--hp-primary); color: var(--hp-text); }

/* Cart button */
.hp-cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-2);
  height: 40px;
  padding-inline: var(--hp-space-3);
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  color: var(--hp-text);
}
.hp-cart-button:hover { border-color: var(--hp-primary); }
.hp-cart-button__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  background-color: var(--hp-primary);
  color: var(--hp-primary-foreground);
  font-size: var(--hp-fs-xs);
  font-weight: var(--hp-fw-semibold);
  border-radius: var(--hp-radius-full);
}

/* Main navigation */
.hp-nav {
  background-color: var(--hp-nav);
  border-bottom: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-nav__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: var(--hp-space-4);
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-medium);
  color: var(--hp-text-secondary);
  border-bottom: 2px solid transparent;
}
.hp-nav__link:hover,
.hp-nav__link[aria-current="page"] {
  color: var(--hp-text);
  border-bottom-color: var(--hp-primary);
}

/* MOBILE HEADER BEHAVIOR (notes):
   - Below 768px: logo + cart button + hamburger stay on the top row.
   - The search field drops to a full-width second row under the logo.
   - The main .hp-nav collapses into a toggleable drawer/accordion menu;
     .hp-nav__list becomes vertical (flex-direction: column).
   - Language selector moves inside the mobile menu drawer.
   - Do NOT hide search on mobile — it stays accessible. */


/* ==========================================================================
   4. HOMEPAGE
   ========================================================================== */

/* Hero — two-column on desktop, stacked on mobile */
.hp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
  align-items: center;
  padding-block: var(--hp-space-12);
}
@media (min-width: 1024px) {
  .hp-hero { grid-template-columns: 1.1fr 1fr; }
}

.hp-hero__text { display: flex; flex-direction: column; gap: var(--hp-space-4); }
.hp-hero__title { font-size: var(--hp-fs-3xl); font-weight: var(--hp-fw-bold); line-height: var(--hp-lh-tight); }
.hp-hero__subtitle { font-size: var(--hp-fs-lg); color: var(--hp-text-secondary); max-width: 32rem; }

.hp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); margin-top: var(--hp-space-2); }

/* Hero image block */
.hp-hero__image {
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  background-color: var(--hp-card);
  box-shadow: var(--hp-shadow-md);
}
.hp-hero__image img { display: block; width: 100%; height: auto; }

/* CTA buttons (shared) */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-2);
  height: 44px;
  padding-inline: var(--hp-space-6);
  border-radius: var(--hp-radius);
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-semibold);
  cursor: pointer;
  border: var(--hp-border-width) var(--hp-border-style) transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hp-btn--primary {
  background-color: var(--hp-primary);
  color: var(--hp-primary-foreground);
}
.hp-btn--primary:hover { background-color: var(--hp-primary-hover); }
.hp-btn--outline {
  background-color: var(--hp-card);
  color: var(--hp-text);
  border-color: var(--hp-border);
}
.hp-btn--outline:hover { border-color: var(--hp-primary); color: var(--hp-primary); }

/* Trust strip */
.hp-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hp-space-4);
  padding-block: var(--hp-space-8);
  border-block: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
@media (min-width: 768px) { .hp-trust-strip { grid-template-columns: repeat(4, 1fr); } }
.hp-trust-strip__item { display: flex; align-items: center; gap: var(--hp-space-3); }
.hp-trust-strip__icon { color: var(--hp-primary); flex: none; }
.hp-trust-strip__label { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); }
.hp-trust-strip__sub { font-size: var(--hp-fs-xs); color: var(--hp-text-muted); }

/* Category cards grid */
.hp-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hp-space-4);
}
@media (min-width: 768px) { .hp-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hp-category-grid { grid-template-columns: repeat(4, 1fr); } }

.hp-category-card {
  display: flex;
  flex-direction: column;
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hp-category-card:hover { box-shadow: var(--hp-shadow-md); border-color: var(--hp-primary); }
.hp-category-card__image { aspect-ratio: 4 / 3; background-color: var(--hp-nav); }
.hp-category-card__image img { width: 100%; height: 100%; object-fit: cover; }
.hp-category-card__body { padding: var(--hp-space-4); }
.hp-category-card__title { font-size: var(--hp-fs-base); font-weight: var(--hp-fw-semibold); }
.hp-category-card__meta { font-size: var(--hp-fs-xs); color: var(--hp-text-muted); margin-top: var(--hp-space-1); }

/* Featured products grid — reuses .hp-product-card (section 5) */
.hp-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hp-space-4);
}
@media (min-width: 768px) { .hp-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hp-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Help block */
.hp-help {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-6);
  align-items: center;
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) { .hp-help { grid-template-columns: 1fr 1fr; } }
.hp-help__text { padding: var(--hp-space-8); display: flex; flex-direction: column; gap: var(--hp-space-3); }
.hp-help__image img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   5. CATEGORY / PRODUCT LISTING
   ========================================================================== */

/* Breadcrumb */
.hp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-2);
  padding-block: var(--hp-space-4);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text-muted);
}
.hp-breadcrumb a { color: var(--hp-text-secondary); }
.hp-breadcrumb a:hover { color: var(--hp-primary); }
.hp-breadcrumb__sep { color: var(--hp-border); }

/* Category page header */
.hp-category-header { display: flex; flex-direction: column; gap: var(--hp-space-2); margin-bottom: var(--hp-space-6); }
.hp-category-header__title { font-size: var(--hp-fs-2xl); font-weight: var(--hp-fw-bold); }
.hp-category-header__desc { color: var(--hp-text-secondary); max-width: 48rem; }

/* Layout: sidebar + grid on desktop */
.hp-listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
}
@media (min-width: 1024px) { .hp-listing { grid-template-columns: 16rem 1fr; } }

/* Sidebar categories */
.hp-sidebar { display: flex; flex-direction: column; gap: var(--hp-space-1); }
.hp-sidebar__item {
  display: block;
  padding: var(--hp-space-2) var(--hp-space-3);
  border-radius: var(--hp-radius-sm);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text-secondary);
}
.hp-sidebar__item:hover { background-color: var(--hp-nav); color: var(--hp-text); }
.hp-sidebar__item[aria-current="page"] {
  background-color: var(--hp-nav);
  color: var(--hp-primary);
  font-weight: var(--hp-fw-semibold);
}

/* Sorting / product count bar */
.hp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-4);
  padding-block: var(--hp-space-3);
  margin-bottom: var(--hp-space-4);
  border-bottom: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-toolbar__count { font-size: var(--hp-fs-sm); color: var(--hp-text-muted); }
.hp-toolbar__sort {
  height: 40px;
  padding-inline: var(--hp-space-3);
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text);
}

/* Product card */
.hp-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hp-product-card:hover { box-shadow: var(--hp-shadow-md); border-color: var(--hp-primary); }

/* Product image area — white, lets product stand out */
.hp-product-card__image {
  aspect-ratio: 1 / 1;
  background-color: var(--hp-card);
  padding: var(--hp-space-4);
}
.hp-product-card__image img { width: 100%; height: 100%; object-fit: contain; }

.hp-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-2);
  padding: var(--hp-space-4);
  border-top: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-product-card__title {
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-medium);
  line-height: 1.35;
  color: var(--hp-text);
}

/* Stock badge */
.hp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-1);
  font-size: var(--hp-fs-xs);
  font-weight: var(--hp-fw-medium);
}
.hp-stock-badge--in { color: var(--hp-success); }
.hp-stock-badge--out { color: var(--hp-text-muted); }
.hp-stock-badge__dot { width: 8px; height: 8px; border-radius: var(--hp-radius-full); background-color: currentColor; }

/* Price */
.hp-price {
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-text);
}
.hp-price--old {
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-regular);
  color: var(--hp-text-muted);
  text-decoration: line-through;
  margin-left: var(--hp-space-2);
}

/* Add-to-cart button — full width on card */
.hp-product-card .hp-btn { width: 100%; margin-top: var(--hp-space-2); }

/* Empty category state */
.hp-empty {
  text-align: center;
  padding-block: var(--hp-space-16);
  color: var(--hp-text-muted);
}
.hp-empty__title { font-size: var(--hp-fs-lg); font-weight: var(--hp-fw-semibold); color: var(--hp-text); }


/* ==========================================================================
   6. PRODUCT DETAIL
   ========================================================================== */

.hp-product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
  padding-block: var(--hp-space-8);
}
@media (min-width: 1024px) { .hp-product-detail { grid-template-columns: 1fr 1fr; } }

/* Image / gallery area */
.hp-product-detail__gallery {
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-8);
}
.hp-product-detail__main-image { aspect-ratio: 1 / 1; }
.hp-product-detail__main-image img { width: 100%; height: 100%; object-fit: contain; }
.hp-product-detail__thumbs { display: flex; gap: var(--hp-space-2); margin-top: var(--hp-space-4); }
.hp-product-detail__thumb {
  width: 64px; height: 64px;
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-sm);
  padding: var(--hp-space-1);
  cursor: pointer;
}
.hp-product-detail__thumb[aria-current="true"] { border-color: var(--hp-primary); }

/* Title / price / status */
.hp-product-detail__info { display: flex; flex-direction: column; gap: var(--hp-space-4); }
.hp-product-detail__title { font-size: var(--hp-fs-2xl); font-weight: var(--hp-fw-bold); line-height: var(--hp-lh-tight); }
.hp-product-detail__price { font-size: var(--hp-fs-2xl); font-weight: var(--hp-fw-bold); color: var(--hp-text); }

/* Add-to-cart area (quantity + button) */
.hp-product-detail__cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-3);
  padding-block: var(--hp-space-4);
  border-block: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-qty {
  display: inline-flex;
  align-items: center;
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  overflow: hidden;
}
.hp-qty__btn {
  width: 40px; height: 44px;
  background-color: var(--hp-card);
  border: none;
  color: var(--hp-text);
  font-size: var(--hp-fs-lg);
  cursor: pointer;
}
.hp-qty__btn:hover { background-color: var(--hp-nav); }
.hp-qty__value { width: 48px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--hp-fw-semibold); }

/* Description / specification blocks (tabs) */
.hp-product-detail__tabs { margin-top: var(--hp-space-8); }
.hp-tabs__list {
  display: flex;
  gap: var(--hp-space-4);
  border-bottom: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-tabs__tab {
  padding: var(--hp-space-3) 0;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-medium);
  color: var(--hp-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.hp-tabs__tab[aria-selected="true"] { color: var(--hp-text); border-bottom-color: var(--hp-primary); }
.hp-tabs__panel { padding-block: var(--hp-space-6); color: var(--hp-text-secondary); }

/* Specification table */
.hp-spec-table { width: 100%; border-collapse: collapse; font-size: var(--hp-fs-sm); }
.hp-spec-table th,
.hp-spec-table td {
  text-align: left;
  padding: var(--hp-space-3);
  border-bottom: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
}
.hp-spec-table th { color: var(--hp-text-muted); font-weight: var(--hp-fw-medium); width: 40%; }


/* ==========================================================================
   7. CART
   ========================================================================== */

.hp-cart {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
  padding-block: var(--hp-space-8);
}
@media (min-width: 1024px) { .hp-cart { grid-template-columns: 1fr 22rem; align-items: start; } }

/* Cart rows */
.hp-cart__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--hp-space-4);
  align-items: center;
  padding: var(--hp-space-4);
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  margin-bottom: var(--hp-space-3);
}
.hp-cart__thumb { width: 80px; height: 80px; padding: var(--hp-space-2); background-color: var(--hp-card); }
.hp-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.hp-cart__title { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); }
.hp-cart__remove { background: none; border: none; color: var(--hp-text-muted); cursor: pointer; }
.hp-cart__remove:hover { color: var(--hp-error); }

/* Quantity controls — reuse .hp-qty from section 6 */

/* Totals card */
.hp-cart__totals {
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-6);
  box-shadow: var(--hp-shadow-sm);
}
.hp-cart__totals-row { display: flex; justify-content: space-between; padding-block: var(--hp-space-2); font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); }
.hp-cart__totals-row--grand {
  border-top: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  margin-top: var(--hp-space-2);
  padding-top: var(--hp-space-3);
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-text);
}

/* Cart buttons */
.hp-cart__totals .hp-btn--primary { width: 100%; margin-top: var(--hp-space-4); }
.hp-cart__continue { margin-top: var(--hp-space-3); }

/* MOBILE STACKING (notes):
   - Below 1024px the totals card drops below the cart rows (single column).
   - .hp-cart__row keeps thumb + details + qty/price; allow it to wrap so the
     quantity controls move under the title on very narrow screens. */


/* ==========================================================================
   8. CHECKOUT
   ========================================================================== */

.hp-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
  padding-block: var(--hp-space-8);
}
@media (min-width: 1024px) { .hp-checkout { grid-template-columns: 1fr 22rem; align-items: start; } }

/* Step indicator */
.hp-checkout__steps { display: flex; gap: var(--hp-space-4); margin-bottom: var(--hp-space-6); }
.hp-checkout__step { display: inline-flex; align-items: center; gap: var(--hp-space-2); font-size: var(--hp-fs-sm); color: var(--hp-text-muted); }
.hp-checkout__step[aria-current="step"] { color: var(--hp-text); font-weight: var(--hp-fw-semibold); }
.hp-checkout__step-num {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--hp-radius-full);
  background-color: var(--hp-nav);
  font-size: var(--hp-fs-xs);
}
.hp-checkout__step[aria-current="step"] .hp-checkout__step-num {
  background-color: var(--hp-primary);
  color: var(--hp-primary-foreground);
}

/* Checkout sections */
.hp-checkout__section {
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-6);
  margin-bottom: var(--hp-space-6);
}
.hp-checkout__section-title { font-size: var(--hp-fs-lg); font-weight: var(--hp-fw-semibold); margin-bottom: var(--hp-space-4); }

/* Form fields */
.hp-field { display: flex; flex-direction: column; gap: var(--hp-space-2); margin-bottom: var(--hp-space-4); }
.hp-field__label { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); }
.hp-field__input {
  height: 44px;
  padding-inline: var(--hp-space-3);
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  font-size: var(--hp-fs-sm);
  color: var(--hp-text);
}
.hp-field__input:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px rgba(232, 112, 32, 0.15);
}
.hp-field__input--error { border-color: var(--hp-error); }
.hp-field__error { font-size: var(--hp-fs-xs); color: var(--hp-error); }
.hp-field-row { display: grid; grid-template-columns: 1fr; gap: var(--hp-space-4); }
@media (min-width: 640px) { .hp-field-row { grid-template-columns: 1fr 1fr; } }

/* Delivery / payment option cards */
.hp-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-3);
  padding: var(--hp-space-4);
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius);
  margin-bottom: var(--hp-space-3);
  cursor: pointer;
}
.hp-option:hover { border-color: var(--hp-primary); }
.hp-option[aria-checked="true"] {
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 1px var(--hp-primary);
}
.hp-option__label { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); }
.hp-option__price { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); }

/* Order summary (reuses totals card pattern) */
.hp-checkout__summary {
  background-color: var(--hp-card);
  border: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-6);
  box-shadow: var(--hp-shadow-sm);
}
.hp-checkout__summary-row { display: flex; justify-content: space-between; padding-block: var(--hp-space-2); font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); }
.hp-checkout__summary-row--grand {
  border-top: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  margin-top: var(--hp-space-2);
  padding-top: var(--hp-space-3);
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-text);
}

/* Checkout buttons */
.hp-checkout .hp-btn--primary { width: 100%; margin-top: var(--hp-space-4); }

/* MOBILE STACKING (notes):
   - Below 1024px the order summary drops below the form sections.
   - .hp-field-row collapses to a single column below 640px.
   - Step indicator may wrap; keep numbers + labels readable. */


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.hp-footer {
  background-color: var(--hp-header);
  border-top: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  margin-top: var(--hp-space-16);
}
.hp-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-8);
  padding-block: var(--hp-space-12);
}
@media (min-width: 640px) { .hp-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-footer__columns { grid-template-columns: repeat(4, 1fr); } }

.hp-footer__heading {
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-semibold);
  color: var(--hp-text);
  margin-bottom: var(--hp-space-3);
}
.hp-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hp-space-2); }
.hp-footer__link { font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); }
.hp-footer__link:hover { color: var(--hp-primary); }

/* Contacts column */
.hp-footer__contact { font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); line-height: var(--hp-lh-body); }
.hp-footer__contact strong { color: var(--hp-text); }

/* Bottom bar */
.hp-footer__bottom {
  border-top: var(--hp-border-width) var(--hp-border-style) var(--hp-border);
  padding-block: var(--hp-space-4);
  font-size: var(--hp-fs-xs);
  color: var(--hp-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-2);
}


/* ==========================================================================
   10. REGRESSION COMMENTS — WHAT MUST NOT BE DONE
   --------------------------------------------------------------------------
   These rules protect the approved Hidplanet.lv visual direction.

   - DO NOT make the site dark. The background is warm light (#F2EDE6).
     Never invert to a dark theme or dark cards.
   - DO NOT introduce random green or purple colors. The only accent is
     orange (#E87020). Green (#3F7A4F) is reserved ONLY for in-stock/success,
     red (#C0392B) ONLY for real validation errors.
   - DO NOT make the design LED-light-bar dominant or "neon/gamer" styled.
     Imagery stays clean studio product shots on white/warm backgrounds.
   - DO NOT create an AliExpress / cheap marketplace look: no loud red sale
     banners, no countdown timers, no cluttered badges, no rainbow buttons,
     no oversized discount starbursts. Keep it restrained and premium.
   - DO NOT transfer React / localStorage / cart-context logic. This file is
     visual only. The cart in the prototype was client-state for demo purposes.
   - DO NOT replace Joomla / JoomShopping checkout, basket, shipping, payment,
     or tax logic. Use JoomShopping's native flow and only apply these styles.
   - DO NOT add gradients, glows, or heavy shadows. Shadows stay soft and subtle.
   - DO NOT use more than the two fonts referenced (Geist sans + Geist mono),
     and never set body text below 14px (--hp-fs-sm).
   ========================================================================== */

/* ================================================================
 * HP-DIAG-CTA 20260712 (task 116) - proper button styling for the
 * diagnostic funnel CTAs on homepage tiles AND on article footers.
 *
 * Goal: kill "underlined link inside orange rectangle" look.
 * Every accent path uses --hp-primary (real brand orange). No blue.
 *
 * Rollback: strip everything between the two HP-DIAG-CTA markers.
 * ================================================================ */

/* ---- 1. Universal button hardening --------------------------------
 * .hp-btn is already the site button class. Reinforce it with an
 * override that eliminates any accidental text-decoration inherited
 * from ancestor anchor styles. Safe for all uses of .hp-btn. */
a.hp-btn,
a.hp-btn:link,
a.hp-btn:visited,
a.hp-btn:hover,
a.hp-btn:focus,
a.hp-btn:focus-visible,
a.hp-btn:active {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0 !important;
}
a.hp-btn.hp-btn--primary,
a.hp-btn.hp-btn--primary:link,
a.hp-btn.hp-btn--primary:visited {
    color: var(--hp-primary-foreground) !important;
}
a.hp-btn.hp-btn--primary:hover,
a.hp-btn.hp-btn--primary:focus {
    color: var(--hp-primary-foreground) !important;
    background-color: var(--hp-primary-hover) !important;
}
a.hp-btn.hp-btn--primary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hp-primary, #e87020) 40%, transparent);
    outline-offset: 2px;
}
a.hp-btn.hp-btn--primary:active {
    transform: translateY(1px);
}
.hp-btn { cursor: pointer; }

/* ---- 2. hp-diag-cta - article-footer + homepage-tile CTA -----------
 * Extends .hp-btn.hp-btn--primary with arrow, min-height 48px on
 * mobile, sensible min-width on desktop, tight vertical padding
 * so it does not look like a full-page banner. */
.hp-diag-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hp-space-2, 0.5rem);
    min-height: 48px;
    min-width: 220px;
    padding-inline: var(--hp-space-6, 1.5rem);
    padding-block: 0.65rem;
    font-weight: var(--hp-fw-semibold, 600);
    font-size: var(--hp-fs-sm, 0.875rem);
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--hp-radius, 0.5rem);
    background-color: var(--hp-primary, #e87020);
    color: var(--hp-primary-foreground, #ffffff) !important;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.hp-diag-cta:hover,
.hp-diag-cta:focus {
    background-color: var(--hp-primary-hover, #c55c0a);
    color: var(--hp-primary-foreground, #ffffff) !important;
    text-decoration: none !important;
}
.hp-diag-cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hp-primary, #e87020) 40%, transparent);
    outline-offset: 2px;
}
.hp-diag-cta:active { transform: translateY(1px); }
.hp-diag-cta__arrow {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke: currentColor;
}
.hp-diag-cta__arrow line,
.hp-diag-cta__arrow polyline { stroke: currentColor; }

/* Article-footer container: centre the single CTA and give it air. */
.hp-article-cta.hp-article-cta--single {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

/* ---- 3. Homepage tile - restructure to article-based card + CTA -----
 * Old markup was `<a class="hp-diag-usecase">` (single external anchor).
 * New markup is `<article class="hp-diag-usecase">` containing an
 * icon, a heading anchor and a body paragraph, followed by a footer
 * with a separate `<a class="hp-diag-cta">` button.
 *
 * The article-level class stays "hp-diag-usecase" so the rest of the
 * template.css (padding, spacing, border, hover accent) still applies. */
.hp-diag-usecase {
    display: flex !important;
    flex-direction: column;
    gap: var(--hp-space-3, 0.75rem);
    height: 100%;
    align-items: stretch;
}
.hp-diag-usecase__title-link {
    color: var(--hp-text);
    text-decoration: none !important;
    display: block;
}
.hp-diag-usecase__title-link:hover {
    color: var(--hp-primary);
    text-decoration: none !important;
}
.hp-diag-usecase__body {
    flex: 1 1 auto;   /* push footer to bottom */
    margin-bottom: 0;
}
.hp-diag-usecase__footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
}
.hp-diag-usecase__footer .hp-diag-cta {
    width: 100%;
    min-width: 0;
}

/* Ensure the tile grid rows have equal-height items (grid stretch is
 * the default, but re-assert here for legacy Safari). */
.hp-diag-usecase-grid { align-items: stretch; }

/* ---- 4. Mobile refinements ---------------------------------------- */
@media (max-width: 720px) {
    .hp-diag-cta {
        width: 100%;
        min-width: 0;
    }
    .hp-article-cta.hp-article-cta--single {
        margin-top: 1.25rem;
    }
    .hp-diag-usecase__footer .hp-diag-cta {
        min-height: 48px;
        padding-block: 0.75rem;
    }
}

/* ---- 5. Nested-anchor safety: article > anchor > anchor is invalid
 * HTML. Keep the tile as <article> so this never happens. */
article.hp-diag-usecase > a.hp-diag-usecase__title-link { text-decoration: none !important; }
article.hp-diag-usecase > a.hp-diag-usecase__title-link:hover,
article.hp-diag-usecase > a.hp-diag-usecase__title-link:visited { text-decoration: none !important; }

/* END HP-DIAG-CTA 20260712 */