/* Project-specific fixes: pure CSS slider + nav behaviour (no external plugins) */

:root {
  --brand-primary-dark: #14163f;
  --brand-primary: #23268c;
  --brand-primary-light: #4c50c9;
}

/* ---- Plain <select> for product-listing toolbar (sort / per-page): the
   theme's .selectpicker class is permanently display:none, waiting on a
   bootstrap-select JS plugin that is never loaded anywhere in this project,
   so it must not be used for controls that need to stay visible/usable. ---- */
.plain-select {
  display: inline-block !important;
  height: 40px;
  padding: 0 30px 0 14px;
  border: 1px solid #e0e2f0;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  appearance: auto;
}
.plain-select:focus {
  outline: none;
  border-color: var(--brand-primary-light);
}

/* ---- Norwegian/English language switch (top bar, next to Instagram) ---- */
.lang-switch {
  position: relative;
  margin-left: 8px;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.lang-toggle .lang-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--brand-primary-light) !important;
  color: #ffffff !important;
  font-size: 15px;
  transition: background .2s ease;
}
.lang-toggle:hover .lang-icon {
  background-color: var(--brand-primary) !important;
}
.lang-toggle .lang-label {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 150px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  padding: 6px 0;
  z-index: 1100;
  list-style: none;
}
.lang-dropdown.open {
  display: block;
}
.lang-dropdown li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.lang-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 16px !important;
  font-size: 13px;
  color: #333 !important;
  cursor: pointer;
}
.lang-btn:hover {
  background: #f2f3fa;
}
.lang-btn.active {
  color: var(--brand-primary) !important;
  font-weight: 700;
}
@media (max-width: 480px) {
  .lang-toggle .lang-label {
    display: none;
  }
}
/* Hide every Google-injected translate UI element (banner bar, hover
   tooltips, highlight boxes) so only our own lang-switch button shows. */
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
}
body {
  top: 0 !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ---- Wishlist toast: Myntra/Flipkart style "Added to Wishlist" popup ---- */
.wishlist-toast {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 9999;
  background: var(--brand-primary-dark);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(20, 22, 63, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wishlist-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.wishlist-toast i {
  color: #f0685f;
}

/* ---- Featured/Special/Popular tabs: rounded segmented control ---- */
.featur-tabs .nav-tabs {
  display: inline-flex;
  background: #fff;
  border: 1px solid #e6e8f5;
  border-radius: 14px;
  padding: 6px;
  gap: 4px;
}
.featur-tabs .nav-tabs:before {
  display: none;
}
.featur-tabs .nav-tabs > li {
  margin: 0 !important;
  float: none;
}
.featur-tabs .nav-tabs > li a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #5a5e82;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  transition: background .2s ease, color .2s ease;
}
.featur-tabs .nav-tabs > li a:hover {
  background: #f2f3fa;
  color: var(--brand-primary);
}
.featur-tabs .nav-tabs > li.active a,
.featur-tabs .nav-tabs > li.active a:hover {
  background: var(--brand-primary-dark);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 767px) {
  /* The segmented control was a fixed-width inline-flex row with no wrap
     or scroll, so a narrow phone screen just clipped the last tab
     ("Popular") past the edge. Stretch it full-width with each tab
     sharing space evenly instead, so all three always fit. */
  .featur-tabs .nav-tabs {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .featur-tabs .nav-tabs > li {
    flex: 1 1 0;
  }
  .featur-tabs .nav-tabs > li a {
    width: 100%;
    justify-content: center;
    padding: 10px 6px !important;
    font-size: 12.5px;
    gap: 5px;
    white-space: nowrap;
  }
}

/* ---- Homepage category tabs (Badminton/Cricket/.../Tennis): small photo
   thumbnails instead of generic glyph icons. ---- */
.main-tabs-sec .nav.tab-icons-img li img {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(20, 22, 63, 0.15);
}
.main-tabs-sec .nav.tab-icons-img li.active img {
  border-color: var(--brand-primary-light);
}

/* ---- Shop by Category grid: image cards linking to filtered product listing ---- */
.shop-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}
.shop-cat-card {
  position: relative;
  display: block;
  flex: 1 1 calc(25% - 15px);
  min-width: 220px;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
}
.shop-cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.shop-cat-card:hover img {
  transform: scale(1.08);
}
.shop-cat-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.shop-cat-overlay h4 {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.shop-cat-overlay span {
  color: #e6e8f5;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.shop-cat-offer {
  background: #f7941d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-cat-offer .shop-cat-overlay {
  position: static;
  background: none;
  text-align: center;
}
.shop-cat-offer .shop-cat-overlay h4 {
  color: #14163f;
  font-size: 28px;
}

/* ---- Category nav: highlight the "Best Deals" item like a sale badge ---- */
.ownmenu > li.hot > a {
  background: #f7941d !important;
  color: #fff !important;
}
.ownmenu > li.hot > a:hover,
.ownmenu > li.hot.open > a {
  background: #e08312 !important;
  color: #fff !important;
}

/* ---- Homepage banner: sliding hero with prev/next arrows ---- */
.css-slider {
  position: relative;
  overflow: hidden;
  height: 560px;
  background: var(--brand-primary-dark);
}
.css-slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .6s ease;
}
.css-slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}
.css-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  color: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: background .2s ease;
}
.css-slider-nav:hover {
  background: #fff;
}
.css-slider-prev { left: 18px; }
.css-slider-next { right: 18px; }
.css-slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.css-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .2s ease;
}
.css-slider-dot.active {
  background: #fff;
}
.css-slide-caption {
  padding-left: 60px;
  max-width: 480px;
}
.css-slide-sub {
  font-size: 20px;
  color: #888;
  margin: 0 0 8px;
}
.css-slide-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--brand-primary);
  margin: 0 0 12px;
}
.css-slide-price {
  font-size: 28px;
  font-weight: 800;
  color: #000;
}
.css-slide-caption .btn-round {
  margin-top: 16px;
  display: inline-block;
}
@media (max-width: 767px) {
  /* The banner slides are ~2:1 wide images; a fixed height on a narrow
     phone leaves large white bars above/below with background-size:contain.
     Match the box's aspect ratio to the images instead so they fill it. */
  .css-slider { height: auto; aspect-ratio: 2 / 1; }
  .css-slide-caption { padding-left: 24px; max-width: 90%; }
  .css-slide-title { font-size: 28px; }
}

/* ---- Desktop nav: show dropdowns on hover (no Bootstrap JS) ---- */
@media (min-width: 992px) {
  .ownmenu .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 1050;
  }
  .ownmenu .dropdown:hover > .dropdown-menu,
  .ownmenu .dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ---- Mobile nav toggle (driven by main.js, no jQuery/Bootstrap JS) ---- */
@media (max-width: 991px) {
  .navbar-collapse { display: none; }
  .navbar-collapse.nav-open { display: block; }
}


@media (max-width: 991px) {
  .cate-lst { display: block; }
  .cate-lst .collapse.in { display: block !important; }
}

/* ---- Tabs (driven by main.js) ---- */
.tab-pane { display: none; }
.tab-pane.active { display: block; }


header .logo img {
  max-height: 130px;
  width: auto;
  object-fit: contain;
  /* background: #fff; */
  padding: 4px 10px;
  border-radius: 6px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
}
@media (max-width: 440px) {
  header .logo img {
    max-height: 44px;
  }
}

.top-bar {
  background: var(--brand-primary-dark) !important;
  border-bottom: none !important;
  height: auto !important;
  padding: 8px 0;
}
.top-bar p,
.top-bar .right-sec li a,
.top-bar .btn,
.top-bar .social-top a,
.top-bar .selectpicker {
  color: rgba(255, 255, 255, 0.85) !important;
}
.top-bar .right-sec li {
  border-right-color: rgba(255, 255, 255, 0.18) !important;
}
/* Flex layout: floats + fixed height on .top-bar used to wrap the last
   item (the language switch) below the bar, overlapping the header.
   Flex lets the row grow and wrap in place instead. */
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  padding-left: 14px;
  padding-right: 14px;
}
.top-bar p {
  margin: 0;
  margin-right: auto;
  padding-left: 0;
}
.top-bar .right-sec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  float: none;
  row-gap: 8px;
  margin-left: auto;
}
.top-bar .right-sec > ul {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
  flex-wrap: wrap;
}
.top-bar .right-sec > ul > li {
  margin-top: 0 !important;
  line-height: normal !important;
}
.top-bar .social-top {
  float: none;
  display: flex;
  align-items: center;
}
.top-bar .social-top a:hover,
.top-bar .right-sec li a:hover {
  color: #fff !important;
}


header {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 65%, var(--brand-primary-light) 100%) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  box-shadow: 0 4px 16px rgba(20, 22, 63, 0.25);
}
header .navbar.ownmenu {
  margin-top: 8px !important;
}
/* ---- Header row: logo / search / icons / cart were floated at different
   heights, so they drifted out of vertical alignment. Flex + center them. ---- */
header > .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 8px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}
/* Above 1440px the row's content (flex, justify-content:flex-start) stays
   pinned to the left while .cart-pop is absolutely positioned at the true
   right edge — the gap between them grows with the viewport, leaving a
   huge dead strip on ultra-wide screens. Cap and center the row past
   1440px only, so nothing below that width is affected. */
@media (min-width: 1441px) {
  header > .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
header .logo {
  float: none;
  margin-left: 0;
  margin-right: 8px;
}
.header-brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.header-brand-badge img {
  max-height: 46px;
  width: auto;
  display: block;
  border-radius: 4px;
}
@media (max-width: 1024px) {
  .header-brand-badge {
    display: none;
  }
}
header .search-cate {
  flex: 0 1 320px;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  margin-left: 8px;
  margin-right: 10px;
}
header .header-icons {
  float: none !important;
  margin: 0 4px 0 0 !important;
}
header .cart-pop {
  position: absolute;
  right: 6px;
  top: 50%;
  float: none;
  margin: 0 !important;
  transform: translateY(-50%);
  /* translateY makes this its own stacking context, which otherwise traps
     .mini-cart-panel's z-index (1150) inside it — leaving nav dropdowns
     (.ownmenu .dropdown-menu, z-index 1050) to paint over the whole box
     from outside since it counts as z-index:auto there. Give it an
     explicit z-index above the nav dropdowns so it stacks correctly. */
  z-index: 1160;
}
@media (min-width: 1200px) and (max-width: 1440px) {
  header > .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
header .nav-right .call-mun {
  color: #fff !important;
}
header .search-cate .submit {
  background: var(--brand-primary-light) !important;
  color: #fff !important;
}
header .search-cate .cate-select-dropdown {
  display: inline-block;
  vertical-align: middle;
}
header .search-cate .cate-select-dropdown > .dropdown-toggle {
  display: inline-block;
  padding: 13px 20px;
  padding-left: 10px;
  font-size: 14px;
  color: #555555;
  white-space: nowrap;
}
header .search-cate .cate-select-dropdown .dropdown-menu {
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  left: 0;
  right: auto;
}
header .search-cate .cate-select-dropdown:hover > .dropdown-menu,
header .search-cate .cate-select-dropdown.open > .dropdown-menu {
  display: block;
}
header .cart-pop > li > a {
  color: #fff !important;
}

/* ---- Mini-cart popup: click-to-toggle preview card (Shopping Cart /
   items / Total / To Cart / To Checkout), styled after a typical
   e-commerce cart preview. Shown via JS toggling .open (see header.html);
   the toggle link's real href to the cart page still works if JS fails. ---- */
.cart-pop .mini-cart-panel {
  display: block;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  margin-top: 12px;
  width: 360px;
  max-width: 90vw;
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 22, 63, 0.22);
  padding: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1150;
}
.cart-pop .mini-cart-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mini-cart-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 40px 14px 18px;
  border-bottom: 1px solid #eef0fb;
}
.mini-cart-head strong {
  font-size: 15px;
  color: var(--brand-primary-dark);
}
.mini-cart-head span {
  font-size: 12px;
  color: #888;
  font-weight: normal;
}
.mini-cart-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #f2f3fa;
  color: #888;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.mini-cart-close:hover {
  background: #e4e7f6;
  color: var(--brand-primary-dark);
}
.mini-cart-items {
  list-style: none;
  margin: 0;
  padding: 6px 18px;
  max-height: 300px;
  overflow-y: auto;
}
.mini-cart-items li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 30px 12px 0 !important;
  border-bottom: 1px solid #f0f1f8 !important;
  margin: 0 !important;
}
.mini-cart-items li:last-child {
  border-bottom: none !important;
}
.mini-cart-items .media-left {
  flex: 0 0 auto;
}
.mini-cart-items .thumb {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
}
.mini-cart-items .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-cart-items .media-body {
  flex: 1 1 auto;
  min-width: 0;
}
.mini-cart-items .tittle {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary-dark) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-cart-item-meta {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
.mini-cart-remove-btn {
  position: absolute;
  top: 12px;
  right: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #f2f3fa;
  color: #888;
  font-size: 11px;
  cursor: pointer;
}
.mini-cart-remove-btn:hover {
  background: #ffe2e2;
  color: #c0392b;
}
.mini-cart-empty {
  padding: 24px 0 !important;
  text-align: center;
  color: #888;
  border: none !important;
}
.mini-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid #eef0fb;
  font-size: 14px;
}
.mini-cart-total strong {
  color: var(--brand-primary-dark);
  font-size: 16px;
}
.mini-cart-actions {
  display: flex;
  gap: 10px;
  padding: 14px 18px 18px;
}
.mini-cart-btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px 18px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.mini-cart-btn-outline {
  background: #fff !important;
  border: 1.5px solid #d9dcf0;
  color: var(--brand-primary-dark) !important;
}
.mini-cart-btn-outline:hover {
  background: #f5f6fc !important;
  border-color: var(--brand-primary-light);
  transform: translateY(-2px);
}
.mini-cart-btn-solid {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) !important;
  border: 1.5px solid transparent;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(35, 38, 140, 0.32);
}
.mini-cart-btn-solid:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(35, 38, 140, 0.4);
}
.mini-cart-btn-solid:active,
.mini-cart-btn-outline:active {
  transform: translateY(0);
}

.ownmenu {
  background: rgba(0, 0, 0, 0.12);
}
.ownmenu .nav > li > a,
.ownmenu .nav > li > a:focus {
  background: transparent !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-weight: 700;
}
.ownmenu .nav > li > a:hover,
.ownmenu .nav > li.active > a,
.ownmenu .nav > li.active > a:focus {
  background: transparent !important;
  color: var(--brand-primary-light) !important;
}
.ownmenu .cate-lst .cate-style {
  background: var(--brand-primary-light) !important;
  color: #fff !important;
}
.ownmenu .dropdown-menu a {
  text-transform: uppercase;
  font-weight: 700;
}

/* ---- Footer: brand gradient (dark navy to brighter blue) to match header ---- */
footer {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 65%, var(--brand-primary-light) 100%) !important;
}
footer h4 {
  position: relative;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 30px;
}
footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-primary-light);
}
footer p,
footer p a,
footer .footer-contact-item a,
footer .links-footer li a,
.foot-link li a {
  color: rgba(255, 255, 255, 0.72) !important;
}
footer p a:hover,
footer .footer-contact-item a:hover,
footer .links-footer li a:hover,
.foot-link li a:hover {
  color: #fff !important;
}
.foot-link {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
footer .social-links a {
  color: rgba(255, 255, 255, 0.85) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  margin: 0 8px 0 0;
}
footer .social-links a:hover {
  color: var(--brand-primary-light) !important;
  border-color: var(--brand-primary-light);
}

/* ---- Footer columns: left-aligned content, vertical dividers between them ---- */
.footer-row-center {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .footer-col + .footer-col {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.footer-contact-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-primary-light);
  color: var(--brand-primary-light);
  font-size: 17px;
}
.footer-contact-item strong {
  display: block;
  color: #fff !important;
  font-weight: 700;
  margin-bottom: 2px;
}
footer .links-footer li a i {
  margin-right: 8px;
  color: var(--brand-primary-light);
}
.footer-brands-col {
  align-items: flex-start !important;
}
.rights {
  background: #0d0e2b !important;
}
.rights p,
.rights p a {
  color: rgba(255, 255, 255, 0.6) !important;
}
.rights .ri-li {
  color: var(--brand-primary-light) !important;
}
.footer-payment-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-payment-icons .pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 72px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background .2s ease, transform .2s ease;
}
.footer-payment-icons .pay-badge:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.footer-payment-icons .pay-badge i {
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
.footer-payment-icons .pay-badge img {
  height: 30px;
  width: auto;
  display: block;
}
.footer-payment-icons .pay-badge-text {
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Footer brand logos column (Yonex / Mahi Sports / FZ Forza) ---- */
.footer-brands-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-brands-col a {
  display: inline-block;
  /* background: #fff; */
  border-radius: 4px;
  padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* .footer-brands-col a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
} */
.footer-brands-col img {
  display: block;
  max-height: 46px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

/* ---- Product cards: white rounded card, soft shadow, pill badges ---- */
.product article {
  border: none !important;
  border-radius: 14px;
  padding: 0 0 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 22, 63, 0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.product article:hover {
  box-shadow: 0 12px 28px rgba(20, 22, 63, 0.16);
  transform: translateY(-4px);
}
.product article img {
  border-radius: 0;
  display: block;
}
.product article .tag,
.product article .price,
.product article .tittle,
.product article p.rev {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
.product article .tag {
  color: #9a9db8;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 12px;
  margin: 10px 0 2px;
}
.product article .tittle {
  color: var(--brand-primary-dark);
  font-weight: 700;
}
.product article .tittle:hover {
  color: var(--brand-primary);
}
.product article p.rev {
  color: #6b6f95;
}
.product article .price {
  color: #1a1a2e;
}
.product article .sale-tag {
  background: #f7941d;
  border-radius: 20px;
  padding: 5px 12px;
  top: 12px;
  left: 12px;
  box-shadow: 0 4px 10px rgba(247, 148, 29, 0.35);
}
.product article .new-tag {
  background: var(--brand-primary-dark);
  border-radius: 20px;
  padding: 5px 12px;
  top: 12px;
  left: 12px;
  font-weight: bold;
}
.product article .cart-btn {
  background: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(35, 38, 140, 0.35);
}
.product article .cart-btn:hover {
  background: var(--brand-primary-dark) !important;
}
.item-col-5 .product article .cart-btn,
.item-col-4 .product article .cart-btn,
.item-col-3 .product article .cart-btn,
.item-col-2 .product article .cart-btn {
  right: 9px;
  bottom: 9px;
}
/* Wishlist heart sits as a badge over the top-right of the product image */
.product article .wishlist-btn {
    background: #ffffff !important;
    color: #8a8fa3 !important;
    box-shadow: 0 2px 8px rgba(20, 22, 63, 0.18);
    border: 1px solid #f0f1f7;
    border-radius: 50px !important;
    height: 36px;
    width: 36px;
    line-height: 34px;
    font-size: 15px;
    margin: 0;
    float: none;
    transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product article .wishlist-btn:hover {
  background: #ffffff !important;
  color: #f0685f !important;
  border-color: #f7d3d0;
  box-shadow: 0 4px 12px rgba(240, 104, 95, 0.25);
}
.product article .wishlist-btn.active {
  color: #f0685f !important;
  border-color: #f7d3d0;
}
.item-col-5 .product article .wishlist-btn,
.item-col-4 .product article .wishlist-btn,
.item-col-3 .product article .wishlist-btn,
.item-col-2 .product article .wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  float: none;
  margin: 0;
}
.product article .heart-btn {
  position: absolute;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eceefa;
  color: #b7bad6 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 2;
  transition: color .2s ease, border-color .2s ease;
}
.product article .heart-btn:hover {
  color: #f0685f !important;
  border-color: #f0685f;
}
.item-col-5 .product article .heart-btn,
.item-col-4 .product article .heart-btn,
.item-col-3 .product article .heart-btn,
.item-col-2 .product article .heart-btn {
  right: 62px;
  bottom: 12px;
}

/* ---- Buttons: consistent brand hover ---- */
.btn-round:hover {
  background: var(--brand-primary-dark) !important;
}

/* ---- Go-to-top button ---- */
.cd-top {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
.cd-top:hover {
  background: var(--brand-primary-light) !important;
}

/* ---- Site-wide polish: selection colour, focus rings, pagination ---- */
::selection {
  background: var(--brand-primary-light);
  color: #fff;
}
input.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--brand-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(76, 80, 201, 0.15) !important;
  outline: none !important;
}
.pagination li a.active,
.pagination li a:hover {
  border-color: var(--brand-primary) !important;
}

/* ---- "From our Blog" (#blog-slide): was an Owl Carousel hook with no CSS
   fallback, so posts stacked full-width. Lay it out as a static 3-col grid. */
#blog-slide {
  margin: 0 -15px;
}
#blog-slide::after {
  content: "";
  display: table;
  clear: both;
}
#blog-slide .blog-post {
  float: left;
  width: 33.3333%;
  padding: 0 15px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
#blog-slide .blog-post img {
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  #blog-slide .blog-post { width: 50%; }
}
@media (max-width: 600px) {
  #blog-slide .blog-post { width: 100%; }
}

/* ---- Homepage side promo tiles: the theme's original background images
   are unbranded demo placeholders (literally labelled "370x250"), which
   clash with the overlaid text. Swap for clean brand-colour panels. ---- */
.slid-sec .like-bnr,
.slid-sec .like-bnr.watch,
.slid-sec .like-bnr.ultra,
.slid-sec .like-bnr.ultra-1 {
  background: linear-gradient(90deg, #eef0fb 35%, rgba(238, 240, 251, 0.35) 100%),
    url(../img/img.jpg) right center / contain no-repeat, #eef0fb !important;
}
.slid-sec .like-bnr .position-center-center h5 {
  color: #555;
}
.week-sale-bnr {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
}

/* ---- "Top Selling of the Week" wide tile: chess promo ---- */
.like-bnr-chess {
  background: url(../img/chess1.jpg) right center / cover no-repeat !important;
}
.like-bnr-chess .position-center-center {
  max-width: 280px;
}
.like-bnr-chess .position-center-center h5 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.like-bnr-chess .position-center-center p {
  color: rgba(255, 255, 255, 0.75);
}
.like-bnr-chess .position-center-center p span {
  color: var(--brand-primary-light);
}
.week-sale-bnr .btn-round {
  background: var(--brand-primary-light) !important;
}

/* ---- Login / Register cards ---- */
.login-sec {
  background: #f7f8fd;
}
.auth-card {
  background: #fff;
  border-radius: 10px;
  padding: 40px 35px;
  box-shadow: 0 10px 30px rgba(20, 22, 63, 0.08);
  border: 1px solid #edeef8;
  height: 100%;
  box-sizing: border-box;
}
.auth-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.auth-card h5 {
  margin-bottom: 6px !important;
}
.auth-card-sub {
  color: #888;
  font-size: 14px;
  margin-bottom: 25px;
}
.auth-card-error {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.cart-variant-label {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #f2f3fa;
  color: #5a5e82;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.badge-order-status {
  display: inline-block;
  padding: 4px 12px;
  background: #e8f7ee;
  color: #1e7e34;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.auth-card-success {
  background: #e8f7ee;
  color: #1e7e34;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.input-icon-wrap {
  position: relative;
  display: block;
}
.input-icon-wrap .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bad6;
  font-size: 14px;
  pointer-events: none;
}
.input-icon-wrap .form-control {
  padding-left: 42px !important;
}
.login-sec .auth-card li input {
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-sec .auth-card li input:focus {
  border-color: var(--brand-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(76, 80, 201, 0.15) !important;
}
/* .forget floats right (style.css); its <li> only floats itself (and thus
   only contains that float) at >=768px, so on mobile the li collapses to
   1px and the next li (Login button) slides up on top of it, eating its
   clicks. Force the li to contain its floated child at every width. */
.login-sec .auth-card li.text-right {
  overflow: hidden;
}
.login-sec .auth-card .forget {
  color: var(--brand-primary);
  text-decoration: none !important;
}
.login-sec .auth-card .forget:hover {
  color: var(--brand-primary-light);
  text-decoration: underline !important;
}
.auth-submit {
  width: 100%;
  padding: 13px 20px !important;
  font-size: 15px !important;
  letter-spacing: .3px;
  box-shadow: 0 6px 16px rgba(35, 38, 140, 0.25);
}
@media (max-width: 767px) {
  .auth-card { margin-bottom: 25px; }
}

/* ---- Product grids: equal-height cards regardless of content length.
   The theme's .item-col-N grids use floats, which don't equalize row
   height, so a 2-line title makes one card taller and knocks later
   cards out of alignment. Switch the row to flexbox + stretch. ---- */
.item-col-5,
.item-col-4,
.item-col-3,
.item-col-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.item-col-5 .product article,
.item-col-4 .product article,
.item-col-3 .product article,
.item-col-2 .product article {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 52px;
}
.product article .tittle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-col-5 .product article .price,
.item-col-4 .product article .price,
.item-col-3 .product article .price,
.item-col-2 .product article .price {
  margin-top: auto;
  float: none;
  padding-right: 46px;
  box-sizing: border-box;
}
.item-col-5 .product article .cart-btn,
.item-col-4 .product article .cart-btn,
.item-col-3 .product article .cart-btn,
.item-col-2 .product article .cart-btn {
  position: absolute;
  right: 9px;
  bottom: 9px;
  float: none;
  margin-top: 0;
}

/* ---- About Us (homepage) ---- */
.about-us-sec {
  background: #f7f8fd;
}
.about-us-sec .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.about-us-img {
  height: 100%;
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20, 22, 63, 0.16);
}
.about-us-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.about-us-img:hover img {
  transform: scale(1.05);
}
/* Generic image/card row stretch, shared by any .about-sec section
   (About page's "Visit Us"-style panels, Contact's "Visit Our Store", etc). */
.about-sec .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.about-sec .about-us-img {
  background: linear-gradient(135deg, #f4f5fc, #e7e9f9);
}

/* About page "Our Story" image is a text-heavy composite banner, not a
   plain photo — taller box + contain so nothing gets cropped. Scoped to
   .about-story-sec only, so it doesn't affect other pages reusing the
   same .about-sec / .about-us-img pattern (e.g. Contact's "Visit Us"). */
.about-story-sec .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.about-story-sec .about-us-img {
  height: auto;
  min-height: 640px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-story-sec .about-us-img img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .about-story-sec .about-us-img { min-height: 300px; }
}
.about-us-card {
  background: #fff;
  height: 100%;
  border-radius: 24px;
  padding: 45px 40px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(20, 22, 63, 0.08);
  border: 1px solid #edeef8;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-us-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.about-us-eyebrow i {
  font-size: 15px;
}
.about-us-card h2 {
  font-size: 28px;
  font-weight: 800;
  color: #222;
  margin: 0 0 20px;
}
.about-us-card h2 span {
  color: var(--brand-primary);
}
.about-us-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.about-us-btn {
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 28px !important;
  box-shadow: 0 6px 16px rgba(35, 38, 140, 0.25);
}
.about-us-btn i {
  margin-left: 6px;
}
@media (max-width: 767px) {
  /* margin-bottom on .about-us-img has no visible effect here — the
     image/card columns are flex items that wrap onto separate lines, and
     a margin on a *descendant* of the column doesn't create space between
     lines. row-gap on the flex container is the reliable way to do it. */
  .about-us-sec .row,
  .about-sec .row {
    row-gap: 25px;
  }
  .about-us-img { min-height: 240px; }
  .about-us-card { padding: 30px 25px; }
}

/* ---- Contact page: "Kontakt oss" 4-up info strip ---- */
.contact-info-heading {
  font-size: 26px;
  font-weight: 800;
  color: #222;
  margin-bottom: 40px;
}
.contact-info-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}
.contact-info-item {
  flex: 1 1 200px;
  text-align: center;
}
.contact-info-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--brand-primary-light);
  color: var(--brand-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.contact-info-item h4 {
  font-size: 16px;
  font-weight: 800;
  color: #222;
  margin: 0 0 6px;
}
.contact-info-item p {
  font-size: 14px;
  color: #888;
  margin: 0;
}
.contact-info-item p a {
  color: #888;
}
.contact-info-item p a:hover {
  color: var(--brand-primary-light);
}
@media (max-width: 767px) {
  .contact-info-grid { justify-content: center; }
}

/* ---- Legal/policy pages (Salgsbetingelser, etc.) ---- */
.policy-card {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 45px 50px;
  box-shadow: 0 10px 30px rgba(20, 22, 63, 0.08);
  border: 1px solid #edeef8;
}
.policy-card h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand-primary-dark);
  margin: 0 0 30px;
}
.policy-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-primary);
  margin: 30px 0 10px;
}
.policy-card h3:first-of-type {
  margin-top: 0;
}
.policy-card p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 6px;
}
.policy-card a {
  color: var(--brand-primary-light);
}
@media (max-width: 767px) {
  .policy-card { padding: 30px 22px; }
  .policy-card h1 { font-size: 24px; }
}

/* ---- About page: hero banner ---- */
.about-banner-img {
  position: relative;
  min-height: 460px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.about-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 14, 43, 0.92) 0%, rgba(20, 22, 63, 0.75) 45%, rgba(20, 22, 63, 0.25) 100%);
}
.about-banner-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 0 15px;
}
.about-banner-eyebrow {
  display: inline-block;
  color: var(--brand-primary-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}
.about-banner-content h2 {
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 16px;
}
.about-banner-content h2 span {
  color: var(--brand-primary-light);
}
.about-banner-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.about-banner-content .btn-round {
  background: var(--brand-primary-light) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.about-banner-content .btn-round:hover {
  background: #fff !important;
  color: var(--brand-primary-dark) !important;
}
@media (max-width: 767px) {
  .about-banner-img { min-height: 380px; }
  .about-banner-content h2 { font-size: 30px; }
}

/* ---- Why Choose Us (homepage) ---- */
.why-choose-sec {
  position: relative;
  background: linear-gradient(180deg, #eef0fb 0%, #e2e5f8 100%);
  background-image:
    radial-gradient(#c7cbec 1.3px, transparent 1.3px),
    linear-gradient(180deg, #eef0fb 0%, #e2e5f8 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: left top, left top;
  background-repeat: repeat, no-repeat;
  overflow: hidden;
}
.why-choose-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 45px;
  position: relative;
}
.why-choose-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid #d6d9f5;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(20, 22, 63, 0.06);
}
.why-choose-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: #14163f;
  margin: 0 0 14px;
}
.why-choose-head h2 span {
  color: var(--brand-primary);
}
.why-choose-head p {
    color: #5a5e82;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
.why-choose-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
}
.why-choose-card {
  flex: 1 1 220px;
  background: #fff;
  border-radius: 20px;
  padding: 36px 26px;
  box-shadow: 0 10px 30px rgba(20, 22, 63, 0.06);
  border: 1px solid #eceefa;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-choose-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20, 22, 63, 0.14);
  border-color: var(--brand-primary-light);
}
.why-choose-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin: 0 auto 22px;
}
.why-choose-icon-blue { background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)); }
.why-choose-icon-purple { background: linear-gradient(135deg, #6a3ec9, #a06ee6); }
.why-choose-icon-green { background: linear-gradient(135deg, #17a672, #34cf95); }
.why-choose-icon-red { background: linear-gradient(135deg, #d1382f, #f0685f); }
.why-choose-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0 0 12px;
  position: relative;
  padding-bottom: 14px;
}
.why-choose-card h4::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-primary);
}
.why-choose-card:nth-child(2) h4::after { background: #a06ee6; }
.why-choose-card:nth-child(3) h4::after { background: #34cf95; }
.why-choose-card:nth-child(4) h4::after { background: #f0685f; }
.why-choose-card p {
  color: #777;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 991px) {
  .why-choose-grid { gap: 18px; }
  .why-choose-card { flex: 1 1 calc(50% - 18px); }
}
@media (max-width: 560px) {
  .why-choose-card { flex: 1 1 100%; }
}

/* ---- About page: Our Journey timeline ---- */
.journey-sec {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 70px 0;
  overflow: hidden;
}
.journey-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 14, 43, 0.94), rgba(20, 22, 63, 0.9));
}
.journey-sec .container {
  position: relative;
  z-index: 2;
}
.journey-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.journey-eyebrow {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.journey-head p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.journey-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.journey-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.journey-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 36px 0;
}
.journey-item:nth-child(even) {
  flex-direction: row-reverse;
}
.journey-year-block,
.journey-detail-block {
  width: 44%;
}
.journey-year-block {
  text-align: right;
  padding-right: 40px;
}
.journey-detail-block {
  padding-left: 40px;
}
.journey-item:nth-child(even) .journey-year-block {
  text-align: left;
  padding-right: 0;
  padding-left: 40px;
}
.journey-item:nth-child(even) .journey-detail-block {
  padding-left: 0;
  padding-right: 40px;
  text-align: right;
}
.journey-year {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}
.journey-dot-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(76, 80, 201, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.journey-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  box-shadow: 0 0 0 4px rgba(76, 80, 201, 0.35);
}
.journey-detail-block h4 {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}
.journey-detail-block p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 767px) {
  .journey-timeline::before { left: 20px; }
  .journey-item,
  .journey-item:nth-child(even) {
    flex-direction: row;
    padding-left: 55px;
  }
  .journey-dot-wrap {
    left: 20px;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
  }
  .journey-year-block,
  .journey-item:nth-child(even) .journey-year-block {
    display: none;
  }
  .journey-detail-block,
  .journey-item:nth-child(even) .journey-detail-block {
    width: 100%;
    text-align: left;
    padding: 0;
  }
  .journey-detail-block h4::before {
    content: attr(data-year) " — ";
  }
}

/* ---- About page: By the Numbers ---- */
.stats-sec {
  background: #fff;
  padding: 55px 0;
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.stats-card {
  flex: 1 1 25%;
  padding: 15px;
  border-right: 1px solid #eceefa;
}
.stats-card:last-child {
  border-right: none;
}
.stats-card i {
  font-size: 26px;
  color: var(--brand-primary-light);
  margin-bottom: 12px;
  display: inline-block;
}
.stats-number,
.stats-suffix {
  font-size: 40px;
  font-weight: 800;
  color: var(--brand-primary);
  display: inline-block;
}
.stats-card p {
  color: #777;
  font-size: 14px;
  margin: 8px 0 0;
}
@media (max-width: 767px) {
  .stats-card { flex: 1 1 50%; border-right: none; margin-bottom: 20px; }
  .stats-number, .stats-suffix { font-size: 32px; }
}

/* ---- Contact page: quick info list + form card ---- */
.contact-quick-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.contact-quick-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.contact-quick-list li a {
  color: #555;
}
.contact-quick-list li a:hover {
  color: var(--brand-primary);
}
.contact-quick-list li i {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #eef0fb;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.contact-sec .auth-card {
  max-width: 100%;
}
.contact-sec .auth-card-icon {
  margin-left: auto;
  margin-right: auto;
}
.contact-sec .auth-card h5,
.contact-sec .auth-card-sub {
  text-align: center;
}
.contact-form li label {
  font-weight: 500;
  color: #000;
  width: 100%;
}
.contact-form textarea.form-control {
  padding: 14px 20px;
  border-radius: 6px;
}

/* ---- Product details page polish ---- */
.product-detail .product {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(20, 22, 63, 0.06);
  border: 1px solid #eceefa;
}
.product-detail .thumb-slider img {
  border-radius: 8px;
  transition: transform .4s ease;
}
.product-detail .thumb-slider:hover img {
  transform: scale(1.03);
}
.product-detail .clr span {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e0e0e0;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.product-detail .clr span:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-primary-light);
}
.product-detail .product .sizes a:hover {
  border-color: var(--brand-primary-light);
  color: var(--brand-primary);
}
.product-detail .quinty input:focus {
  border-color: var(--brand-primary-light) !important;
  outline: none;
}

/* Trust badges under Add to Cart */
.trust-badges {
  display: flex;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
}
.trust-badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.trust-badges li i {
  color: var(--brand-primary-light);
  font-size: 16px;
}

/* Tabs nav */
.item-tabs-sec .nav > li > a {
  font-weight: 600;
  color: #888;
}
.item-tabs-sec .nav > li.active > a {
  color: var(--brand-primary);
}

/* Reviews */
.product-review .review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.product-review .review-item:last-child {
  border-bottom: none;
}
.product-review .review-item h6 {
  font-size: 15px;
  font-weight: 700;
  margin: 6px 0 8px;
  color: #222;
}
.product-review .review-item p {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.product-review .review-author {
  font-size: 13px;
  color: var(--brand-primary);
  font-weight: 600;
}

/* ---- Product details: gallery (vanilla JS, no slider plugin) ---- */
.pd-main-image {
  border-radius: 8px;
  overflow: hidden;
  background: #f7f8fd;
}
.pd-main-image img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pd-thumbs-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.pd-thumbs {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar {
  display: none;
}
.pd-thumb {
  width: 64px;
  height: 64px;
  min-width: 64px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid #e6e6e6;
  transition: border-color .2s ease, transform .2s ease;
}
.pd-thumb:hover {
  transform: translateY(-2px);
}
.pd-thumb.active {
  border-color: var(--brand-primary);
}
.pd-thumb-nav {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pd-thumb-nav:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ---- Sidebar price filter: real dual-handle range slider, built with
   two native <input type="range"> elements layered on one track (plain
   HTML/CSS/JS, no slider plugin — see main.js for the drag behaviour). ---- */
.cost-price-content {
  width: 100%;
  margin-bottom: 30px;
}
.price-slider {
  position: relative;
  height: 20px;
  margin-bottom: 16px;
}
.price-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #e2e2e2;
  border-radius: 2px;
  transform: translateY(-50%);
}
.price-slider-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  transform: translateY(-50%);
}
.price-range-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  height: 4px;
}
.price-range-input::-moz-range-track {
  background: transparent;
  height: 4px;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--brand-primary);
  cursor: pointer;
  margin-top: 0;
}
.price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--brand-primary);
  cursor: pointer;
}
.price-values {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.price-values span {
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 13px;
  color: #555;
  background: #fff;
}
.cost-price-content .btn-round {
  width: 100%;
}

/* ---- Product cards: whole card is clickable (stretched-link pattern).
   Interactive controls inside the card (cart/wishlist/add-to-cart/heart)
   sit above the overlay so they keep working independently. ---- */
.product article {
  position: relative;
}
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product article .cart-btn,
.product article .wishlist-btn,
.product article .heart,
.product article .btn-round,
.product article .quinty {
  position: relative;
  z-index: 2;
}

/* ---- Header: account + wishlist icons ---- */
header .header-icons {
  float: right !important;
  list-style: none;
  margin: 0 18px 0 60px !important;
  padding: 6px 10px;
  background: #eef0fb;
  border-radius: 30px;
  line-height: 0;
}
header .header-icons li {
  display: inline-block;
  vertical-align: middle;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
header .header-icons li a,
header .header-icons li:first-child a,
header .header-icons li:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
  background-color: var(--brand-primary-light) !important;
}
header .header-icons li a:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}
header .header-icons li a i,
header .header-icons li a i.fa-user,
header .header-icons li a i.fa-heart-o {
  color: #ffffff !important;
}

/* ---- Wishlist page ---- */
.wishlist-title {
  color: var(--brand-primary);
  font-weight: 600;
}
.wishlist-title:hover {
  color: var(--brand-primary-light);
}
.wishlist-cart-btn {
  padding: 8px 18px !important;
  font-size: 13px !important;
  margin-right: 10px;
}

/* ---- Top bar phone number ---- */
.top-bar .topbar-phone {
  color: #ffffff !important;
}
.top-bar .topbar-phone i {
  color: #ffffff !important;
  margin-right: 4px;
}

/* ---- Compact star rating (product cards) ---- */
.star-rating {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1;
}
.star-rating .star-rating-base i {
  color: #e0e0e0 !important;
}
.star-rating .star-rating-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
}
.star-rating .star-rating-overlay i {
  color: #fecb00 !important;
}
.rev .no-reviews-yet {
  color: #999999 !important;
  font-style: italic;
}

/* ---- Customer Reviews section (product detail page) ---- */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
}
.reviews-summary-score {
  text-align: center;
  min-width: 140px;
}
.reviews-summary-score .score-value {
  font-size: 42px;
  font-weight: 700;
  color: #222222;
  line-height: 1;
}
.reviews-summary-score .star-rating {
  font-size: 18px;
  margin: 10px 0;
}
.reviews-summary-score .score-count {
  color: #777777;
  font-size: 13px;
}
.reviews-summary-bars {
  flex: 1;
  min-width: 240px;
}
.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #555555;
}
.rating-bar-row .rating-bar-label {
  width: 42px;
  flex-shrink: 0;
}
.rating-bar-row .rating-bar-track {
  flex: 1;
  height: 8px;
  background: #eeeeee;
  border-radius: 4px;
  overflow: hidden;
}
.rating-bar-row .rating-bar-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 4px;
}
.rating-bar-row .rating-bar-count {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  color: #999999;
}

.reviews-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.reviews-toolbar .reviews-sort select {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  color: #333333;
}
.write-review-btn {
  background: var(--brand-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.write-review-btn:hover {
  background: var(--brand-primary-light);
}
.review-login-hint {
  color: #777777;
  font-size: 13px;
}

.review-form-wrap {
  display: none;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 30px;
}
.review-form-wrap.open {
  display: block;
}
.review-form-wrap h5 {
  margin-top: 0;
  margin-bottom: 16px;
}
.rating-selector {
  font-size: 26px;
  margin-bottom: 16px;
}
.rating-selector i {
  color: #e0e0e0;
  cursor: pointer;
  margin-right: 4px;
}
.rating-selector i.fa-star {
  color: #fecb00;
}
.review-form-wrap .form-group {
  margin-bottom: 16px;
}
.review-form-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333333;
}
.review-form-wrap input[type="text"],
.review-form-wrap textarea,
.review-form-wrap input[type="file"] {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
}
.review-form-wrap textarea {
  min-height: 100px;
  resize: vertical;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
}
.review-item:last-child {
  border-bottom: none;
}
.review-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-author-name {
  font-weight: 600;
  color: #222222;
}
.review-date {
  color: #999999;
  font-size: 12px;
}
.review-item .star-rating {
  font-size: 13px;
  margin-bottom: 6px;
}
.review-item h6 {
  margin: 0 0 6px;
}
.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.review-images img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
}
.verified-buyer-tag {
  color: #2ecc71;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}

/* ==============================================================
   GSAP-driven site animations: supporting CSS
   ============================================================== */

/* Product card image: gentle zoom on hover. .product article already has
   overflow:hidden + position:relative, so the image simply scales inside
   its existing frame. */
.product article img {
  transition: transform 0.5s ease;
}
.product article:hover img {
  transform: scale(1.08);
}

/* Buttons: subtle hover-lift/scale and press-down feedback. */
.btn-round,
.cart-btn,
.wishlist-btn,
.write-review-btn,
.view-all-link,
.review-form-toggle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-round:hover,
.cart-btn:hover,
.wishlist-btn:hover,
.write-review-btn:hover {
  transform: translateY(-2px) scale(1.03);
}
.btn-round:active,
.cart-btn:active,
.wishlist-btn:active,
.write-review-btn:active,
.view-all-link:active {
  transform: scale(0.96);
}
.view-all-link:hover {
  transform: translateX(2px);
}

/* Wishlist heart: quick pop when toggled (class applied briefly by JS). */
@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  65% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.wishlist-btn.heart-pop i {
  animation: heart-pop 0.45s ease;
}

/* Mini-cart icon: small bounce whenever a product is added to the cart
   (class applied briefly by JS). */
@keyframes cart-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.15); }
  55% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-2px) scale(1.05); }
}
.cart-pop.cart-bounce .dropdown-toggle {
  animation: cart-bounce 0.5s ease;
}

/* Product gallery: crossfade handled by GSAP opacity tween in JS; this
   just gives the browser a hint for a smoother paint. */
.pd-main-image img {
  will-change: opacity;
}

/* Respect prefers-reduced-motion: neutralize the CSS-driven micro
   interactions above for anyone who has asked the OS/browser for less
   motion. GSAP-driven animations already bail out at the JS layer. */
@media (prefers-reduced-motion: reduce) {
  .product article img,
  .btn-round,
  .cart-btn,
  .wishlist-btn,
  .write-review-btn,
  .view-all-link,
  .review-form-toggle {
    transition: none !important;
  }
  .product article:hover img,
  .btn-round:hover,
  .cart-btn:hover,
  .wishlist-btn:hover,
  .write-review-btn:hover,
  .btn-round:active,
  .cart-btn:active,
  .wishlist-btn:active,
  .write-review-btn:active,
  .view-all-link:active,
  .view-all-link:hover {
    transform: none !important;
  }
  .wishlist-btn.heart-pop i,
  .cart-pop.cart-bounce .dropdown-toggle {
    animation: none !important;
  }
}

/* Category/Brand/search-category dropdowns: on touch devices there is no
   :hover, so tap-to-open (see main.js) reveals the menu via this class. */
.ownmenu .dropdown.dropdown-open > .dropdown-menu,
.cate-select-dropdown.dropdown-open > .dropdown-menu {
  display: block !important;
}

/* ---- Mobile header: compact top bar (logo + search + menu button) plus
   an off-canvas slide-in menu, replacing the desktop header/nav row which
   doesn't fit a phone screen (the theme's responsive.css also forces
   header .search-cate to a 500px min-width, which overflows narrow
   viewports entirely). Both blocks below are mobile-only; the desktop
   header/nav markup is hidden at this breakpoint instead of restyled. ---- */
.mobile-topbar,
.mobile-brand-badge,
.mobile-search-bar,
.mobile-nav-overlay,
.mobile-nav-panel {
  display: none;
}

/* .top-bar: Min konto / Kontakt oss / Handlekurv / Logg inn, matching
   mahisports.no's top header — same content and styling on desktop and
   mobile, just tighter spacing at narrow widths. */
.top-bar .right-sec > ul > li {
  border-right: none !important;
}
.top-bar .right-sec > ul > li a {
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.top-bar .social-top a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: 8px;
}

@media (max-width: 1024px) {
  header > .container,
  header .navbar.ownmenu {
    display: none !important;
  }

  .top-bar {
    padding: 6px 0 !important;
  }
  .top-bar .topbar-welcome {
    display: none !important;
  }
  .top-bar .right-sec {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
  }
  .top-bar .right-sec > ul {
    gap: 8px 14px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .top-bar .right-sec > ul > li {
    white-space: nowrap;
    padding: 0 !important;
  }
  .top-bar .right-sec > ul > li a {
    font-size: 11px;
  }
  .top-bar .social-top {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: 0;
  }
  .top-bar .social-top a {
    width: 26px;
    height: 26px;
    font-size: 12px;
    margin-left: 0;
  }

  header {
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(20, 22, 63, 0.18);
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
  }
  .mobile-topbar-logo img {
    max-height: 70px;
    width: auto;
    display: block;
  }
  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s ease;
  }
  .mobile-icon-btn:hover,
  .mobile-icon-btn[aria-expanded="true"] {
    background: var(--brand-primary-light);
  }
  .mobile-icon-btn .cart-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: #d81f26;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--brand-primary-dark);
  }

  .mobile-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height .25s ease, padding .25s ease;
  }
  .mobile-search-bar.open {
    max-height: 60px;
    padding: 0 16px 14px;
  }
  .mobile-search-bar input[type="search"] {
    flex: 1 1 auto;
    height: 40px;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
  }
  .mobile-search-bar .submit {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary-light);
    color: #fff;
    flex: 0 0 auto;
  }

  .mobile-brand-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px 10px;
  }
  .mobile-brand-badge img {
    max-height: 26px;
    width: auto;
    display: block;
    border-radius: 3px;
  }

  /* Off-canvas panel */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 30, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1200;
  }
  .mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-nav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1201;
    overflow-y: auto;
  }
  .mobile-nav-panel.open {
    transform: translateX(0);
  }
  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 65%, var(--brand-primary-light) 100%);
    border-bottom: none;
  }
  .mobile-nav-logo {
    max-height: 32px;
    width: auto;
  }
  .mobile-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .mobile-nav-close:hover {
    background: var(--brand-primary-light);
    color: #fff;
    transform: rotate(90deg);
  }
  .mobile-nav-body {
    flex: 1 1 auto;
    background: linear-gradient(180deg, #eef1fb 0%, #f5f7fd 260px);
    padding: 26px 18px;
  }
  .mobile-nav-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 65%, var(--brand-primary-light) 100%);
    border-radius: 40px;
    padding: 14px;
    margin-bottom: 28px;
    box-shadow: 0 10px 24px rgba(20, 22, 63, 0.18);
  }
  .mobile-nav-quick a {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .mobile-nav-quick a:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  }
  .mobile-nav-links {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
  }
  .mobile-nav-links > li {
    margin-bottom: 12px;
    float: none;
  }
  .mobile-nav-links > li > a,
  .mobile-nav-links > li > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff !important;
    color: var(--brand-primary-dark) !important;
    font-weight: 700;
    text-transform: none;
    padding: 16px 20px !important;
    border-radius: 14px;
    border-left: 4px solid transparent;
    box-shadow: 0 2px 10px rgba(20, 22, 63, 0.07);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  }
  .mobile-nav-links > li > a:active,
  .mobile-nav-links > li > .dropdown-toggle:active {
    transform: scale(0.98);
  }
  .mobile-nav-links > li.dropdown.dropdown-open > .dropdown-toggle {
    border-left-color: var(--brand-primary-light);
    background: linear-gradient(90deg, #eef1fb 0%, #fff 60%) !important;
  }
  .mobile-nav-links .dropdown-menu {
    position: static !important;
    display: none;
    float: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 8px 0 2px 16px;
    margin: 0;
  }
  .mobile-nav-links .dropdown.dropdown-open .dropdown-menu {
    display: block !important;
  }
  .mobile-nav-links .dropdown.dropdown-open > .dropdown-toggle i {
    transform: rotate(180deg);
    color: var(--brand-primary-light);
  }
  .mobile-nav-links .dropdown-toggle i {
    font-size: 12px;
    transition: transform .2s ease, color .2s ease;
  }
  .mobile-nav-links .dropdown-menu li {
    margin-bottom: 4px;
  }
  .mobile-nav-links .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    color: #666 !important;
    text-transform: none;
    font-weight: 500;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-nav-links .dropdown-menu li a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    flex: 0 0 auto;
  }
  .mobile-nav-links .dropdown-menu li a:hover {
    background: #eef1fb;
    color: var(--brand-primary-dark) !important;
  }
  .mobile-nav-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 22, 63, 0.07);
  }
  .mobile-nav-lang-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-primary-dark);
  }
  .mobile-nav-lang-btns {
    display: flex;
    gap: 8px;
    background: #eef1fb;
    padding: 4px;
    border-radius: 24px;
  }
  .mobile-nav-lang-btns .lang-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 20px;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--brand-primary-dark) !important;
    transition: background .2s ease, color .2s ease;
  }
  .mobile-nav-lang-btns .lang-btn.active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(20, 22, 63, 0.25);
  }
  .mobile-nav-footer {
    background: #fff;
    padding: 22px 20px;
    border-top: 1px solid #eef0fb;
  }
  .mobile-nav-social-label {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--brand-primary-dark);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 8px;
  }
  .mobile-nav-social-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  }
  .mobile-nav-social {
    display: flex;
    gap: 10px;
  }
  .mobile-nav-social a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: var(--brand-primary-dark) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(20, 22, 63, 0.1);
    border: 1px solid #eef0fb;
  }

  body.mobile-nav-locked {
    overflow: hidden;
  }
}