/*
 * Shared mock-store UI.
 * Keep this file structural. Site colors live in /theme.css via CSS custom properties.
 */

html {
  font-size: var(--type-base-size);
}

body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--brand-font-family);
}

a {
  color: var(--brand-link);
}

a:hover {
  color: var(--brand-link-hover);
  text-decoration: none;
}

hr {
  border-color: var(--brand-border);
}

sup,
.uk-text-danger {
  color: var(--brand-error) !important;
}

.uk-text-muted {
  color: var(--brand-muted) !important;
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
  min-height: var(--nav-item-height) !important;
  padding-inline: var(--nav-item-inline-padding) !important;
  color: var(--brand-text);
  text-transform: none !important;
  font-size: var(--nav-font-size) !important;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus,
.uk-navbar-item:hover,
.uk-navbar-item:focus {
  color: var(--brand-primary-hover);
}

.uk-card-noshadow {
  border: var(--border-width) solid var(--brand-border);
  box-shadow: none;
}

.uk-tab > .uk-active > a {
  border-color: var(--brand-primary) !important;
}

.uk-label {
  background: var(--brand-primary);
  color: var(--brand-primary-contrast);
}

.uk-subnav-pill > .uk-active > a,
.uk-subnav-pill > * > a:hover {
  background: var(--brand-primary);
  color: var(--brand-primary-contrast);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: var(--brand-focus);
}

.uk-offcanvas-bar {
  background: var(--brand-offcanvas-bg);
  color: var(--brand-offcanvas-text);
}

.uk-offcanvas-bar a,
.uk-offcanvas-bar .uk-nav-header {
  color: var(--brand-offcanvas-text);
}

.w-full {
  width: 100%;
}

.object-cover {
  display: block;
  max-height: var(--hero-max-height);
  object-fit: cover;
}

.page-container {
  position: relative;
  min-height: 100vh;
}

.content-wrapper {
  padding-bottom: var(--footer-space);
}

footer {
  padding-block-start: var(--space-md);
  background: var(--brand-footer-bg);
  color: var(--brand-footer-text);
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: var(--footer-height);
}

.footer a,
footer a {
  color: var(--brand-footer-link);
  font-size: var(--footer-link-size);
}

.footer a:hover,
footer a:hover {
  color: var(--brand-footer-link-hover);
}

.region-message {
  border-bottom: var(--border-width-strong) solid var(--brand-surface-strong);
  padding-block: var(--space-xs);
  color: var(--brand-muted);
}

.region-message a,
.small-text {
  color: var(--brand-text) !important;
  font-size: var(--text-small-size);
}

.logo-wrapper {
  text-align: center;
}

.logo-wrapper img {
  max-height: var(--logo-max-height);
  max-width: var(--logo-max-width);
}

.mobile-logo {
  max-height: var(--mobile-logo-max-height) !important;
  max-width: var(--mobile-logo-max-width) !important;
}

.big-search {
  width: var(--search-width) !important;
  max-width: var(--search-width) !important;
}

.global-icons {
  margin-top: var(--space-md);
  color: var(--brand-text);
  font-size: var(--text-small-size);
}

.global-icons a {
  color: var(--brand-text);
}

.global-icons a:hover {
  color: var(--brand-primary-hover);
  text-decoration: none !important;
}

.mock-icon {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  font-size: var(--icon-text-size);
  line-height: 1;
}

.nav-basket-item-count {
  position: absolute;
  top: var(--cart-badge-top);
  right: var(--cart-badge-right);
  min-width: var(--cart-badge-size);
  padding: var(--cart-badge-padding);
  line-height: var(--cart-badge-size);
  border-radius: 999px;
  background: var(--brand-badge-bg);
  color: var(--brand-badge-text);
  font-size: var(--cart-badge-font-size);
  text-align: center;
}

.mobile-cart-count {
  top: var(--mobile-cart-badge-top);
  right: var(--mobile-cart-badge-right);
  font-size: var(--mobile-cart-badge-font-size);
}

.mock-cart-trigger {
  line-height: inherit;
  padding: 0;
  text-transform: none;
  color: inherit;
}

.hover-cart {
  width: var(--cart-dropdown-width) !important;
}

.cart-over-title {
  color: var(--brand-text);
  font-size: var(--heading-small-size);
}

.hover-cart-total {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-bold);
}

.basket-hover-img,
.mock-cart-line-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-item-image,
.mock-cart-line-image {
  width: var(--cart-line-image-size);
  height: var(--cart-line-image-size);
  object-fit: contain;
  border: var(--border-width) solid var(--brand-border);
  background: var(--brand-bg);
}

.mock-cart-table th,
.mock-cart-table td {
  vertical-align: middle;
}

.js-cart-latest[hidden],
.basket-empty-msg[hidden],
.js-cart-page-filled[hidden],
.js-cart-page-empty[hidden] {
  display: none !important;
}

.brand-color-text,
.product-card,
.paginate-blurb {
  color: var(--brand-primary) !important;
}

.brand-color-bg,
a.brand-color-bg,
.brand-button,
.brand-button:visited,
a.brand-button,
a.brand-button:visited {
  display: inline-block;
  border: none;
  background: var(--brand-primary);
  color: var(--brand-primary-contrast) !important;
  text-decoration: none;
  cursor: pointer;
}

.brand-color-bg:hover,
button.brand-color-bg:hover,
input.brand-color-bg:hover,
a.brand-color-bg:hover,
.brand-button:hover,
a.brand-button:hover {
  background: var(--brand-primary-hover);
  color: var(--brand-primary-contrast) !important;
  text-decoration: none;
}

.brand-color-border {
  border-color: var(--brand-primary) !important;
}

.brand-color-transparent,
.brand-color-transparent-hover {
  background: var(--brand-overlay);
}

.brand-color-transparent-hover:hover {
  background: var(--brand-primary-hover);
}

.brand-second-color-text {
  color: var(--brand-secondary) !important;
}

.brand-second-color-bg,
a.brand-second-color-bg,
.brand-second-button,
.brand-second-button:visited,
a.brand-second-button,
a.brand-second-button:visited {
  border: none;
  background: var(--brand-secondary);
  color: var(--brand-secondary-contrast) !important;
  text-decoration: none;
}

.brand-second-color-bg:hover,
a.brand-second-color-bg:hover,
.brand-second-button:hover,
a.brand-second-button:hover {
  background: var(--brand-secondary-hover);
  color: var(--brand-secondary-contrast) !important;
  text-decoration: none;
}

.brand-second-color-border {
  border-color: var(--brand-secondary) !important;
}

.page-menu-hover:hover,
.page-menu-active {
  padding-top: var(--page-menu-active-padding-top);
  margin-top: var(--page-menu-active-margin-top);
  border-top: var(--page-menu-active-border-width) solid var(--brand-primary) !important;
}

.page-menu-hover-classic:hover,
.breadcrumb-selected {
  background: var(--brand-primary) !important;
}

.breadcrumb-option {
  background: var(--brand-secondary);
  color: var(--brand-secondary-contrast);
}

.arrow-right {
  border-left-color: var(--brand-primary) !important;
}

.product-card {
  display: block;
  text-decoration: none;
}

.product-card:hover {
  color: var(--brand-primary-hover) !important;
}

.product-listing {
  color: var(--brand-text);
}

.product-title {
  color: var(--brand-text);
}

.product-price {
  color: var(--brand-primary);
}

.product-images-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.product-images-thumb.selected {
  outline: var(--focus-outline-width) solid var(--brand-focus);
  outline-offset: var(--focus-outline-offset);
}

.prod-image-padding {
  box-sizing: border-box;
  width: 100%;
  padding: var(--product-image-padding);
}

.prod-image-large-padding {
  box-sizing: border-box;
  width: 100%;
  padding: var(--product-large-image-padding);
}

.product-available {
  color: var(--brand-muted);
}

.input-product-quantity {
  margin-inline-end: var(--space-sm);
}

.promo-code-form,
.contact-form,
.auth-form {
  color: var(--brand-text);
}

.theme-link {
  color: var(--brand-link) !important;
}

.theme-link:hover {
  color: var(--brand-link-hover) !important;
}