/* ==========================================================================
   COMET SPORT — 2026 redesign skin
   Loaded LAST in template/header.php so it overrides the legacy theme
   (assets/comet/css/style.css) and shop styles (assets/shop/css/style.css).

   IMPORTANT: this file only RESTYLES existing markup. It must never rely on
   renamed IDs/classes — all functional hooks (forms, AJAX, cart JS) keep
   their original selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESKIN
   -------------------------------------------------------------------------- */
body {
  font-family: var(--cs-font) !important;
  color: var(--cs-text);
  background: var(--cs-bg);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.main-menu-title {
  font-family: var(--cs-font) !important;
}

h1, h2, .section-title {
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--cs-text);
}

a {
  color: var(--cs-blue);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
}

a:hover,
a:focus {
  color: var(--cs-red);
  text-decoration: none;
}

::selection {
  background: var(--cs-blue);
  color: #fff;
}

/* Pill buttons — legacy theme + bootstrap buttons */
.btn,
.button,
button.btn,
input[type="submit"].btn,
.btn-secondary,
.btn-info,
.btn-primary {
  font-family: var(--cs-font) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--cs-radius-pill) !important;
  border: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .1s ease;
}

.btn-secondary,
a.btn-secondary,
.button.blue,
.btn-info,
.btn-primary {
  background: var(--cs-blue) !important;
  color: #fff !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
.button.blue:hover,
.btn-info:hover,
.btn-primary:hover {
  background: var(--cs-red) !important;
  color: #fff !important;
}

.button.gray {
  background: var(--cs-bg-hover) !important;
  color: var(--cs-text) !important;
}

.button.gray:hover {
  background: var(--cs-dark) !important;
  color: #fff !important;
}

.button.medium {
  padding: 14px 32px !important;
  font-size: 14px !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* Generic inputs → design system inputs */
.giftinput,
select.giftinput,
input.giftinput,
textarea.giftinput,
.form-control {
  font-family: var(--cs-font) !important;
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  background: #fff !important;
  color: var(--cs-text) !important;
  padding: 11px 15px !important;
  font-size: 14px !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .15s ease;
}

.giftinput:focus,
.form-control:focus {
  border-color: var(--cs-blue) !important;
}

label.zip {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
  margin: 10px 0 6px 0;
  display: inline-block;
}

/* Numbered step badges on cart page */
.dropcap2 {
  background: var(--cs-blue) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  font-family: var(--cs-font) !important;
  width: 40px;
  height: 40px;
  line-height: 40px !important;
  display: inline-block;
  text-align: center;
  font-size: 16px !important;
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   2. HEADER — USP bar, logo row, nav, megamenu
   -------------------------------------------------------------------------- */

/* USP topbar (new element, added in header.php) */
.cs-usp-bar {
  background: var(--cs-blue);
  color: rgba(255, 255, 255, 0.94);
}

.cs-usp-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
}

.cs-usp-bar__items {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.cs-usp-bar__items span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-usp-bar__items span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cs-red);
  border-radius: 1px;
  display: inline-block;
}

.cs-usp-bar__phone {
  font-weight: 600;
}

@media (max-width: 767px) {
  .cs-usp-bar__inner { padding: 7px 15px; justify-content: center; }
  .cs-usp-bar__items { gap: 14px; }
  .cs-usp-bar__items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; width: 100%; }
  .cs-usp-bar__items span:nth-child(n+3) { display: none; }
  .cs-usp-bar__phone { display: none; }
}

/* Header shell */
#nav,
#nav.header-1,
#nav .header-wrapper {
  background: #fff !important;
}

#nav {
  border-bottom: 1px solid var(--cs-border);
  box-shadow: none !important;
}

#nav .logo-row {
  border-bottom: 1px solid var(--cs-border);
}

/* Main nav links → bold uppercase with red active underline */
#nav .nav.navbar-nav > li > a {
  font-family: var(--cs-font) !important;
}

#nav .main-menu-title {
  font-family: var(--cs-font) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--cs-dark) !important;
}

#nav .nav.navbar-nav > li {
  border-bottom: 3px solid transparent;
  transition: border-color .15s ease;
}

#nav .nav.navbar-nav > li:hover {
  border-bottom-color: var(--cs-red);
}

#nav .nav.navbar-nav > li:hover .main-menu-title {
  color: var(--cs-blue) !important;
}

/* Megamenu dropdown */
#nav ul.sub {
  border-top: 1px solid var(--cs-border) !important;
  box-shadow: var(--cs-shadow-menu) !important;
  border-radius: 0 0 14px 14px;
  background: #fff !important;
}

#nav ul.sub .menu-sub-container {
  background: #fff !important;
}

#nav ul.sub .box ul li a {
  font-family: var(--cs-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--cs-dark) !important;
  border-radius: 8px;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}

#nav ul.sub .box ul li a:hover {
  background: var(--cs-bg-hover) !important;
  color: var(--cs-blue) !important;
}

#nav .clubIcon {
  height: 20px !important;
  width: 20px !important;
  object-fit: contain;
  border: none;
  padding: 0;
  margin: 0 !important;
}

/* Cart pill + login in nav */
#nav .nav.navbar-nav > li.megamenu > a .fa-shopping-cart {
  color: var(--cs-dark);
  font-size: 16px;
}

#nav #lblCartCount {
  background: var(--cs-red) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 999px !important;
  display: inline-block;
  text-align: center;
  padding: 0 5px;
}

/* Search overlay */
.cd-search {
  background: rgba(19, 26, 38, 0.55) !important;
}

.cd-search input,
.cd-search #q {
  font-family: var(--cs-font) !important;
  border-radius: var(--cs-radius-pill) !important;
  border: 2px solid var(--cs-blue) !important;
  background: #fff !important;
  color: var(--cs-text) !important;
}

/* Floating cart button */
.floating-cart-link {
  background-color: var(--cs-red) !important;
  box-shadow: 0 12px 28px rgba(230, 58, 46, 0.4) !important;
}

.floating-cart-link:hover {
  background-color: var(--cs-dark) !important;
}

.floating-cart-link .badge {
  background-color: var(--cs-dark) !important;
  font-family: var(--cs-font);
}

/* --------------------------------------------------------------------------
   3. FOOTER (markup rebuilt in template/footer.php with cs- classes)
   -------------------------------------------------------------------------- */
.cs-footer {
  background: var(--cs-footer);
  color: #fff;
  font-family: var(--cs-font);
}

.cs-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 40px 32px;
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr;
  gap: 48px;
}

@media (max-width: 1023px) {
  .cs-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cs-footer__inner { grid-template-columns: 1fr; }
}

.cs-footer h4 + h4 {
  margin-top: 24px !important;
}

.cs-footer__brand-card {
  background: #fff;
  border-radius: 0;
  padding: 12px 16px;
  align-self: flex-start;
  display: inline-block;
}

.cs-footer__brand-card img {
  height: 56px;
  display: block;
}

.cs-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.cs-footer__col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 300px;
}

.cs-footer h4 {
  margin: 0 0 8px 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff !important;
}

.cs-footer h4 + h4 {
  margin-top: 12px !important;
}

.cs-footer__col a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px;
}

.cs-footer__col a:hover {
  color: #fff !important;
}

.cs-footer__muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.cs-footer__social {
  display: flex;
  gap: 10px;
}

.cs-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff !important;
  font-size: 14px;
}

.cs-footer__social a:hover {
  background: var(--cs-red);
  border-color: var(--cs-red);
  color: #fff !important;
}

.cs-footer__pay {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cs-footer__pay span {
  background: #fff;
  border-radius: 4px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
}

.cs-footer__pay img {
  height: 20px;
  display: block;
  width: auto;
}

.cs-footer__map iframe {
  border-radius: 12px;
  width: 100%;
}

.cs-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cs-footer__bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.cs-footer__bottom-inner a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .cs-footer__inner { padding: 44px 20px 28px 20px; gap: 32px; }
}

/* --------------------------------------------------------------------------
   4. SHARED SECTION PRIMITIVES (home + content pages)
   -------------------------------------------------------------------------- */
.cs-section {
  background: var(--cs-bg);
}

.cs-section--soft {
  background: var(--cs-bg-soft);
}

.cs-section--blue {
  background: var(--cs-blue);
}

.cs-section--dark {
  background: var(--cs-dark);
}

.cs-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 32px;
}

.cs-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cs-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-red);
}

.cs-kicker--line::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--cs-red);
  display: inline-block;
}

.cs-section--blue .cs-kicker,
.cs-section--dark .cs-kicker {
  color: var(--cs-red-soft);
}

.cs-h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  color: var(--cs-text);
  line-height: 1.05 !important;
}

.cs-section--blue .cs-h2,
.cs-section--dark .cs-h2 {
  color: #fff;
}

.cs-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.cs-section-head__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--cs-blue);
  white-space: nowrap;
}

.cs-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cs-text-soft);
}

.cs-btn {
  display: inline-block;
  background: var(--cs-red);
  color: #fff !important;
  font-family: var(--cs-font);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 15px 32px;
  border: none;
  border-radius: var(--cs-radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease;
}

.cs-btn:hover {
  background: var(--cs-dark);
  color: #fff !important;
}

.cs-btn--outline {
  background: transparent;
  color: var(--cs-text) !important;
  border: 2px solid var(--cs-dark);
}

.cs-btn--outline:hover {
  background: var(--cs-dark);
  color: #fff !important;
}

.cs-btn--blue {
  background: var(--cs-blue);
}

.cs-btn--blue:hover {
  background: var(--cs-red);
}

/* --------------------------------------------------------------------------
   5. HOME PAGE (markup rebuilt in home-v2.php with cs- classes)
   -------------------------------------------------------------------------- */

/* Hero */
.cs-hero {
  background: var(--cs-bg-soft);
  overflow: hidden;
}

.cs-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 76px 32px;
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) minmax(300px, 1fr);
  gap: 56px;
  align-items: center;
}

.cs-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-hero__title {
  margin: 0 !important;
  font-size: clamp(42px, 5.4vw, 72px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
  line-height: 0.98 !important;
  color: var(--cs-text);
}

.cs-hero__title span {
  color: var(--cs-blue);
}

.cs-hero__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cs-text-soft);
  max-width: 480px;
}

.cs-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cs-hero__media {
  position: relative;
  min-height: 420px;
}

.cs-hero__media-bg {
  display: none; /* fix: hero had 4 competing decorations */
  position: absolute;
  top: 24px;
  right: -12px;
  width: 72%;
  height: 88%;
  background: var(--cs-blue);
  border-radius: 16px;
}

.cs-hero__img {
  position: relative;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: var(--cs-shadow-card);
}

.cs-hero__badge {
  position: absolute;
  bottom: -18px;
  left: -14px;
  background: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: var(--cs-shadow-float);
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-hero__badge-dot {
  width: 10px;
  height: 10px;
  background: var(--cs-red);
  border-radius: 999px;
  display: inline-block;
}

.cs-hero__badge-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--cs-text);
}

.cs-hero__badge-sub {
  font-size: 13px;
  color: var(--cs-text-soft);
}

@media (max-width: 900px) {
  .cs-hero__inner {
    grid-template-columns: 1fr;
    padding: 44px 20px 60px 20px;
    gap: 40px;
  }
  .cs-hero__media { min-height: 0; }
  .cs-hero__img { height: 300px; width: 100%; }
  .cs-hero__media-bg { display: none; }
  .cs-hero__badge { bottom: -14px; left: 8px; }
}

/* Category / campaign tiles (DB-driven images) */
.cs-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cs-tile {
  position: relative;
  display: block;
  border-radius: var(--cs-radius-box);
  overflow: hidden;
  height: 400px;
  cursor: pointer;
}

.cs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s ease;
}

.cs-tile:hover img {
  transform: scale(1.04);
}

.cs-tile__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--cs-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  z-index: 2;
}

.cs-tile:nth-child(2) .cs-tile__badge { background: var(--cs-blue); }
.cs-tile:nth-child(3) .cs-tile__badge { background: var(--cs-dark); }

@media (max-width: 767px) {
  .cs-tile { height: 300px; }
}

/* Campaign mosaic (labeled images 3..9 from DB) */
.cs-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cs-mosaic__item {
  position: relative;
  display: block;
  border-radius: var(--cs-radius-box);
  overflow: hidden;
  min-height: 260px;
  background: var(--cs-bg-soft);
}

.cs-mosaic__item img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s ease;
}

.cs-mosaic__item:hover img {
  transform: scale(1.04);
}

.cs-mosaic__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 14px 18px;
  background: linear-gradient(to top, rgba(16, 26, 46, 0.82), rgba(16, 26, 46, 0));
  color: #fff;
  z-index: 2;
}

.cs-mosaic__caption h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-mosaic__caption h3 a { color: #fff !important; }

.cs-mosaic__caption span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.cs-mosaic__caption span a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline;
}

.cs-mosaic__caption span a:hover { color: #fff !important; }

/* Club finder */
.cs-clubs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cs-clubs__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.cs-clubs__intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.cs-clubs__search {
  position: relative;
  width: 100%;
  max-width: 380px;
}

.cs-clubs__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 22px;
  border: none;
  border-radius: var(--cs-radius-pill);
  font-family: var(--cs-font);
  font-size: 15px;
  color: var(--cs-text);
  background: #fff;
  outline: none;
}

.cs-clubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.cs-club-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
}

.cs-club-chip:hover {
  background: #fff;
  color: var(--cs-blue) !important;
}

.cs-club-chip__logo {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 3px;
  box-sizing: border-box;
}

.cs-club-chip__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-club-chip--hidden { display: none; }

/* Featured products */
.cs-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.cs-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-box);
  overflow: hidden;
  color: var(--cs-text) !important;
  transition: box-shadow .2s ease;
}

.cs-product-card:hover {
  box-shadow: var(--cs-shadow-card);
  color: var(--cs-text) !important;
}

.cs-product-card__media {
  position: relative;
  height: 240px;
  background: #F4F5F2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cs-product-card__body {
  padding: 16px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-product-card__cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

.cs-product-card__name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.cs-product-card__price {
  font-size: 16px;
  font-weight: 800;
  color: var(--cs-text);
  margin-top: 3px;
}

/* Store section */
.cs-store {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
}

.cs-store__media {
  position: relative;
}

.cs-store__media img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--cs-radius-box);
  display: block;
}

.cs-store__badge {
  position: absolute;
  bottom: -20px;
  right: 24px;
  background: var(--cs-red);
  color: #fff;
  border-radius: 12px;
  padding: 18px 24px;
}

.cs-store__badge-big {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.cs-store__badge-sub {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

.cs-store__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-store__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cs-text-soft);
}

.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.cs-stat {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
}

.cs-stat__big {
  font-size: 24px;
  font-weight: 900;
  color: var(--cs-blue);
}

.cs-stat__sub {
  font-size: 13px;
  color: var(--cs-text-soft);
  margin-top: 2px;
}

@media (max-width: 767px) {
  .cs-store__media img { height: 300px; }
}

/* Services */
.cs-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cs-service {
  background: var(--cs-bg-soft);
  border-radius: var(--cs-radius-box);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-service__num {
  width: 40px;
  height: 40px;
  background: var(--cs-blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.cs-service:nth-child(2) .cs-service__num { background: var(--cs-red); }
.cs-service:nth-child(3) .cs-service__num { background: var(--cs-dark); }

.cs-service h3 {
  margin: 8px 0 0 0 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--cs-text);
  text-transform: none;
}

.cs-service p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cs-text-soft);
}

/* Russ banner */
.cs-russ {
  background: var(--cs-red);
  border-radius: var(--cs-radius-box);
  padding: 40px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.cs-russ__title {
  margin: 0 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05 !important;
}

.cs-russ__text {
  margin: 6px 0 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.cs-russ__text a {
  color: #fff !important;
  text-decoration: underline;
}

.cs-russ .cs-btn {
  background: #fff;
  color: var(--cs-red) !important;
}

.cs-russ .cs-btn:hover {
  background: var(--cs-dark);
  color: #fff !important;
}

/* Fordelsklubben (newsletter) */
.cs-member {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
}

.cs-member__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cs-member__perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.cs-member__perks span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
}

.cs-member__perks span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cs-red);
  border-radius: 1px;
  display: inline-block;
  flex-shrink: 0;
}

.cs-member__privacy {
  margin: 8px 0 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 460px;
}

.cs-member__privacy a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: underline;
}

.cs-member__form {
  background: #fff;
  border-radius: var(--cs-radius-box);
  padding: 36px;
}

.cs-member__form h3 {
  margin: 0 0 16px 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--cs-text);
  text-transform: none;
}

.cs-member__form .form-group {
  margin-bottom: 12px;
}

.cs-member__form .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cs-member__form .form-row-2 .form-group {
  margin-bottom: 0;
}

.cs-member__form .form-control {
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  padding: 13px 16px !important;
  margin-bottom: 0 !important;
}

.cs-member__form .btn-primary {
  width: 100%;
  margin-top: 14px;
  background: var(--cs-red) !important;
  padding: 15px 24px !important;
  font-size: 15px !important;
}

.cs-member__form .btn-primary:hover {
  background: var(--cs-dark) !important;
}

@media (max-width: 480px) {
  .cs-member__form .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .cs-member__form .form-row-2 .form-group { margin-bottom: 12px; }
}

/* Partners */
.cs-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cs-partners a,
.cs-partners span {
  display: block;
  border-radius: var(--cs-radius-box);
  overflow: hidden;
  border: 1px solid var(--cs-border);
  background: #fff;
}

.cs-partners img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   6. PRODUCT LISTING (products.php) — restyle existing markup
   -------------------------------------------------------------------------- */

/* Page heading band */
#cat h3 {
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  color: var(--cs-text) !important;
}

/* Product grid cards: ul.categorie > li > .pro-info */
ul.categorie {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  padding: 0;
  list-style: none;
}

ul.categorie > li {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

ul.categorie .pro-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-box) !important;
  overflow: hidden;
  padding: 0 0 18px 0 !important;
  transition: box-shadow .2s ease;
}

ul.categorie .pro-info:hover {
  box-shadow: var(--cs-shadow-card);
}

ul.categorie .pro-info .sold_out,
ul.categorie .pro-info .img-wrap {
  position: relative;
  background: #F4F5F2;
}

ul.categorie .pro-info img.img-fluid {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}

ul.categorie .pro-info h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--cs-text) !important;
  padding: 12px 16px 0 16px;
  margin: 0 !important;
  min-height: 0 !important;
}

ul.categorie .pro-info h6 img {
  height: 22px !important;
  border-radius: 999px;
  vertical-align: -6px;
}

ul.categorie .pro-info h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--cs-text) !important;
  margin: 8px 0 12px 0 !important;
  padding: 0 16px;
}

ul.categorie .pro-info .btn-secondary {
  margin: auto 16px 0 16px;
  padding: 11px 20px !important;
  font-size: 13px !important;
}

/* product labels (Nyhet/Salg badges from admin) */
.product-card-label-row {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.label-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--cs-font);
}

/* sold-out / arriving overlay */
ul.categorie .text-block {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(19, 26, 38, 0.82);
  color: #fff;
  z-index: 2;
}

ul.categorie .text-block p {
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 !important;
}

/* Filters sidebar */
.filters-sidebar .gender-filter-card,
.filters-sidebar .brand-filter-card,
.filters-sidebar .price-filter-card {
  background: #fff;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-box) !important;
  box-shadow: none !important;
}

.filters-sidebar h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--cs-text) !important;
}

.brand-filter-option {
  border-radius: 8px !important;
  font-family: var(--cs-font) !important;
}

.brand-filter-option:hover {
  background: var(--cs-bg-hover) !important;
}

.brand-filter-option.is-active {
  background: var(--cs-blue) !important;
  color: #fff !important;
}

.brand-filter-option.is-active .brand-filter-option__label,
.brand-filter-option.is-active .brand-filter-option__count {
  color: #fff !important;
}

.brand-filter-card__clear,
.gender-filter-card__clear {
  color: var(--cs-red) !important;
  font-weight: 700;
}

.filters-mobile-toggle__button {
  background: var(--cs-dark) !important;
  color: #fff !important;
  border-radius: var(--cs-radius-pill) !important;
  font-family: var(--cs-font) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filters-mobile-toggle__count {
  background: var(--cs-red) !important;
}

.price-slider::-webkit-slider-thumb {
  background: var(--cs-blue) !important;
}

.price-filter-card__slider-track {
  background: var(--cs-border-input);
}

/* Pagination */
.pagination {
  display: flex !important;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32px 0;
}

.pagination a,
.pagination span,
.pagination strong {
  font-family: var(--cs-font) !important;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 14px;
  border-radius: 999px !important;
  border: 1.5px solid var(--cs-border-input) !important;
  color: var(--cs-text) !important;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  display: inline-block;
}

.pagination a:hover {
  border-color: var(--cs-blue) !important;
  color: var(--cs-blue) !important;
}

.pagination strong,
.pagination .active,
.pagination a.active {
  background: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   7. PRODUCT SINGLE (product_single.php) — restyle existing markup
   -------------------------------------------------------------------------- */

/* Gallery column */
.big-img {
  background: #F4F5F2;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-box);
  overflow: hidden;
}

.big-img img {
}

.product-label-overlay {
  font-family: var(--cs-font) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

/* Price block */
.price,
.price h4,
.price span {
  font-family: var(--cs-font) !important;
}

#price-new1,
#guest-member-price-new,
#price-normal {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--cs-text) !important;
}

#price-old,
#guest-member-price-old {
  color: var(--cs-text-faint) !important;
  text-decoration: line-through;
  font-weight: 500 !important;
}

.size-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
}

/* Variation boxes (color swatches) */
.variation_box {
  border: 2px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  font-family: var(--cs-font) !important;
  font-weight: 700 !important;
  color: var(--cs-text);
  transition: border-color .15s ease, background-color .15s ease;
}

.variation_box:hover {
  border-color: var(--cs-blue) !important;
}

.variation_box.variation_select_box {
  border-color: var(--cs-blue) !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
}

.variation_box.variation_select_box img {
  outline: 2px solid #fff;
}

.disabled_variation {
  opacity: 0.4;
}

/* Add to cart CTA */
.add_to_cart,
#add_only,
#append_only {
  background: var(--cs-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 32px !important;
  border-radius: var(--cs-radius-pill) !important;
  border: none !important;
  font-size: 14px !important;
}

.add_to_cart:hover,
#add_only:hover,
#append_only:hover {
  background: var(--cs-dark) !important;
}

.add_to_cart[disabled],
.guest-add-to-cart {
  background: var(--cs-text-faint) !important;
  cursor: not-allowed;
}

.add_more {
  background: var(--cs-blue) !important;
}

/* Addons box rows on product page */
.pricenumber {
  font-family: var(--cs-font) !important;
  font-weight: 800;
  color: var(--cs-text);
}

#dv_sm_price {
  font-size: 22px;
  font-weight: 900;
  color: var(--cs-text);
}

/* --------------------------------------------------------------------------
   8. CART + CHECKOUT (cart.php) — restyle existing markup ONLY
   -------------------------------------------------------------------------- */

.cart-box {
  background: #fff !important;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-box);
  padding: 24px 26px !important;
  margin-bottom: 18px;
}

.cart-box h4 {
  font-weight: 900 !important;
  text-transform: uppercase;
  font-size: 20px !important;
  color: var(--cs-text) !important;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
}

.cart-box .club-name {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cs-bg-soft);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 15px;
}

.cart-box .club-name img {
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cs-border);
  object-fit: contain;
}

/* Cart line items */
.productlis-cart {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-box);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #fff;
}

.productlis-cart ul.tablename {
  border: none !important;
}

.productlis-cart .pname img {
  border-radius: 10px;
  background: #F4F5F2;
  padding: 4px;
}

.tile-cartp {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--cs-text-soft) !important;
}

.tile-cartp,
.tile-cartp span {
  font-family: var(--cs-font) !important;
}

/* header row of the cart table */
ul.tablename.br-table {
  border: none !important;
  border-bottom: 2px solid var(--cs-border) !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cs-text-muted);
}

/* qty stepper */
.cart-minus,
.cart-plus {
  width: 44px;
  height: 44px;
  line-height: 44px !important;
  text-align: center;
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-weight: 700 !important;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.cart-minus:hover,
.cart-plus:hover {
  border-color: var(--cs-blue) !important;
  background: var(--cs-bg-hover);
}

input.num {
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  font-family: var(--cs-font);
  font-weight: 800;
  font-size: 14.5px;
}

/* addon rows */
.addonbox {
  background: var(--cs-bg-soft);
  border-radius: 12px;
  padding: 10px 16px;
  margin-top: 10px;
}

.addon-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--cs-text-soft);
}

.addon-row .addon-price {
  font-weight: 700;
  color: var(--cs-text);
  white-space: nowrap;
}

/* shipping + totals */
.shipping-row {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  padding: 12px 16px !important;
  margin-top: 8px;
  font-size: 14.5px;
}

.shipping-row .shipping-amount {
  font-weight: 800;
  color: var(--cs-text);
}

.totalcart {
  background: var(--cs-bg-soft) !important;
  border-radius: var(--cs-radius-box);
  padding: 18px 22px;
  margin-top: 14px;
}

/* dead discount-code collapsible → hide (no name attr, no handler) */
.totalcart .collapsible-btn,
.totalcart .collapsible-content {
  display: none !important;
}

.toalamoint li h5,
.toalamoint li h6 {
  font-family: var(--cs-font) !important;
  color: var(--cs-text) !important;
}

.toalamoint li h6 {
  font-size: 17px !important;
  font-weight: 800 !important;
}

.toalamoint .total-amount {
  font-size: 22px;
  font-weight: 900;
}

.text-success,
.text-success strong {
  color: var(--cs-green) !important;
}

/* payment radios */
#payment-form .form-check-input[type="radio"] {
  accent-color: var(--cs-blue);
}

#payment-form .form-check-label img {
  background: #fff;
  border: 1.5px solid var(--cs-border-input);
  border-radius: 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#payment-form .form-check-input[type="radio"]:checked + .form-check-label img {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(29, 62, 150, 0.15);
}

.newsletter-checkbox label {
  font-family: var(--cs-font);
  font-size: 14.5px;
  color: var(--cs-text-mid);
}

.newsletter-checkbox input[type="checkbox"] {
  accent-color: var(--cs-blue);
}

/* member notice (guest gate) */
.member-cart-notice,
.member_cart_notice {
  border-radius: var(--cs-radius-box) !important;
  font-family: var(--cs-font) !important;
}

/* --------------------------------------------------------------------------
   9. MISC — alerts, modals, breadcrumbs, thankyou
   -------------------------------------------------------------------------- */
.alert {
  border-radius: 12px !important;
  font-family: var(--cs-font) !important;
}

.modal-content {
  border-radius: var(--cs-radius-box) !important;
  border: none !important;
  box-shadow: var(--cs-shadow-menu) !important;
  font-family: var(--cs-font) !important;
}

/* Legacy decorative leftovers that clash with the new look */
.page-section.grey-light-bg,
.page-section.gray-bg {
  background: var(--cs-bg-soft) !important;
}

/* --------------------------------------------------------------------------
   10. HARDENED OVERRIDES — the views ship their own inline <style> blocks
   that load AFTER this stylesheet, so equal-specificity rules there would
   win. Everything below uses !important (or beats them on specificity) on
   the exact properties those blocks set.
   -------------------------------------------------------------------------- */

/* All form labels (product page sets font-family:'Lato') */
label {
  font-family: var(--cs-font) !important;
}

/* products.php: pagination inline rules use !important — match and outgun
   (div.pagination a = higher specificity than the view's .pagination a) */
div.pagination a {
  color: var(--cs-text) !important;
  font-weight: 700 !important;
  background-color: #fff !important;
  margin: 0 !important;
  padding: 0 14px !important;
  text-decoration: none !important;
}

div.pagination a:hover {
  background-color: #fff !important;
  color: var(--cs-blue) !important;
}

div.pagination a.active {
  background-color: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
  color: #fff !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

/* cart.php: .value-button paints stepper buttons gray */
.value-button,
.cart-minus,
.cart-plus {
  background: #fff !important;
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: 999px !important;
}

.value-button:hover,
.cart-minus:hover,
.cart-plus:hover {
  background: var(--cs-bg-hover) !important;
  border-color: var(--cs-blue) !important;
}

/* cart.php: .dropcap2 inline sets 55px circle + gray bg */
.dropcap2 {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 10px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  float: none !important;
  font-size: 16px !important;
  background-color: var(--cs-blue) !important;
  background-image: none !important;
}

/* product_single.php: variation swatches ship blue bg / white text inline,
   and also carry the theme's .button.small.blue classes — outrank both */
.variation_box,
.button.blue.variation_box,
.button.small.blue.variation_box {
  background: #fff !important;
  color: var(--cs-text) !important;
  padding: 8px 14px !important;
  margin: 4px 6px 4px 0;
}

.variation_box.variation_select_box,
.variation_select_box,
.button.blue.variation_select_box,
.button.small.blue.variation_box.variation_select_box {
  background: var(--cs-blue) !important;
  color: #fff !important;
  border: 2px solid var(--cs-blue) !important;
}

.disabled_variation {
  background: var(--cs-bg-hover) !important;
  color: var(--cs-text-faint) !important;
  border: 2px solid var(--cs-border) !important;
  opacity: 1;
}

/* product_single.php: thumbnail strip */
.show-small-img {
  border-radius: 10px;
  border: 2px solid var(--cs-border);
  background: #F4F5F2;
  object-fit: contain;
}

.show-small-img.active,
.show-small-img:hover {
  border-color: var(--cs-blue);
}

/* product_single.php: red back-link strip */
.product-nav {
  color: var(--cs-blue) !important;
  font-family: var(--cs-font) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   11. POLISH PASS — professional finishing details
   Kills the remaining legacy font leaks (Poppins/Lato/Roboto from
   assets/shop/css/style.css + inline styles) and tightens typography,
   spacing and small components across the shop pages.
   -------------------------------------------------------------------------- */

/* Legacy classes that hardcode Poppins/Lato/Roboto — force Archivo */
.pro-info h6,
.pro-info h4,
.title-product h4,
.pro-price,
.inner-box-desc span,
.Antall-tb label,
.stock span,
#cat a,
nav.pro-nav > .nav.nav-tabs,
.tab-content .tab-pane,
.tabs-3 .nav-tabs a {
  font-family: var(--cs-font) !important;
}

/* Breadcrumbs: quiet, modern, no shouting uppercase */
nav.breadcrumbs {
  margin: 4px 0 10px 0;
}

nav.breadcrumbs span,
nav.breadcrumbs a {
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--cs-text-muted) !important;
  font-weight: 500 !important;
}

nav.breadcrumbs a:hover {
  color: var(--cs-blue) !important;
}

/* Product title (inline style sets capitalize/500/#000 — outrank it) */
#prod_name {
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  color: var(--cs-text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  margin: 4px 0 10px 0 !important;
}

/* Price row on product page */
#price-new1,
#guest-member-price-new,
#price-normal {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--cs-text) !important;
}

#price-old,
#guest-member-price-old {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--cs-text-faint) !important;
}

/* Discount badge next to the price (inline teal bg → brand red pill).
   Scoped to #content so the header/floating cart badges stay untouched. */
#content span.badge {
  background: var(--cs-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle !important;
  font-family: var(--cs-font) !important;
}

/* Availability line ("Tilgjengelighet: På lager") */
.stock {
  margin: 2px 0 8px 0;
}

.stock span {
  font-size: 14px !important;
  font-weight: 600;
}

/* Qty inputs on product page */
#qty_1,
input[name="qty[]"] {
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  padding: 10px 6px 10px 12px !important;
  width: 74px;
  font-weight: 700 !important;
  font-family: var(--cs-font) !important;
}

/* --- Description section under the product ---
   The block is a floated col that sits directly under <body>; the old
   footer's .page-section used to clear it. Clear it again and turn it into
   a proper centered section. */
.cs-footer {
  clear: both;
}

div.col-md-12.col-sm-6.mb-3 {
  float: none !important;
  width: 100% !important;
  max-width: 1280px;
  margin: 8px auto 48px auto !important;
  padding: 0 32px;
  box-sizing: border-box;
}

.tabs-3 .nav-tabs {
  border-bottom: 2px solid var(--cs-border) !important;
  margin-bottom: 0 !important;
}

.tabs-3 .nav-tabs li a,
.tabs-3 .nav-tabs li.active a {
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cs-text) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px;
  padding: 12px 4px !important;
}

.tabs-3 .nav-tabs li.active a {
  color: var(--cs-blue) !important;
  border-bottom-color: var(--cs-red) !important;
}

.tab-content .tab-pane {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--cs-text-soft) !important;
  padding: 18px 0 0 0 !important;
}

.tabs-3 hr {
  display: none;
}

/* --- Header niceties --- */
/* Fix (header 01): one pill treatment in the nav row. Login/logout stay plain
   text with the shared red underline; the cart is the only solid pill. */
#nav .nav.navbar-nav > li > a[href*="auth/login"],
#nav .nav.navbar-nav > li > a[href*="auth/logout"] {
  font-family: var(--cs-font) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cs-dark) !important;
  padding: 10px 16px !important;
  line-height: 1 !important;
}

#nav .nav.navbar-nav > li > a[href*="auth/login"]:hover,
#nav .nav.navbar-nav > li > a[href*="auth/logout"]:hover {
  color: var(--cs-blue) !important;
}

/* Cart icon in the nav → dark pill with the red count badge (design look).
   :has() is progressive enhancement — older browsers keep the plain icon. */
#nav .nav.navbar-nav > li > a:has(> i.fa-shopping-cart) {
  background: var(--cs-dark);
  border-radius: 999px;
  padding: 10px 16px !important;
  margin: 0 0 0 10px;
  line-height: 1 !important;
  display: inline-block;
}

#nav .nav.navbar-nav > li > a:has(> i.fa-shopping-cart) i.fa-shopping-cart {
  color: #fff !important;
}

#nav .nav.navbar-nav > li > a:has(> i.fa-shopping-cart):hover {
  background: var(--cs-red);
}

#nav .nav.navbar-nav > li:has(i.fa-shopping-cart) {
  border-bottom-color: transparent !important;
}

/* --- Listing page header area --- */
/* breadcrumb links above the category title */
a.breadcrumbs,
a.breadcrumbs:visited {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--cs-text-muted) !important;
}

a.breadcrumbs:hover {
  color: var(--cs-blue) !important;
}

/* category description blob (admin text, often a long size chart) */
.p-20-cont .blockquote {
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
}

.p-20-cont .blockquote p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--cs-text-muted) !important;
  max-width: 900px;
}

/* category title with icon */
.p-20-cont .section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  border: none !important;
}

.p-20-cont .section-title img {
  height: 64px !important;
  border-radius: 12px;
}

/* ==========================================================================
   12. DESIGN REVIEW FIXES
   Implements the "Comet Sport — 2026 redesign · fix list" review.
   Item ids (G1-G7 / per-page 01-07) refer to that document.
   ========================================================================== */

/* --- G2: one page width. Home/header/footer use a 1280 + 32px column; the
   interior pages used Bootstrap .container, so content edges never lined up. */
/* NOTE: .p-20-cont doubles as a Bootstrap column modifier in the auth and
   listing views (e.g. <div class="col-md-6 p-20-cont">), so the page-column
   treatment must skip anything that is also a grid column - otherwise the
   login photo stretches to the full page width. */
.container:not([class*="col-"]),
.p-20-cont:not([class*="col-"]),
#cat.container,
#content {
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}

/* nested containers must not add the padding twice */
.container .container,
.container .p-20-cont,
#content .container,
.p-20-cont .p-20-cont,
.container #content,
.p-20-cont #content {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* .wrapper sits straight inside a .row on the product page, so it inherits the
   Bootstrap -15px gutter with no column to compensate. Put it back. */
.container > .row > .wrapper,
.p-20-cont > .row > .wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 767px) {
  .container:not([class*="col-"]),
  .p-20-cont:not([class*="col-"]),
  #cat.container,
  #content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* keep the USP bar on the same 20px gutter as page content */
  .cs-usp-bar__inner { padding-left: 20px; padding-right: 20px; }
}

/* --- G6: interior pages need top space and a consistent page header. */
#cat,
#content {
  padding-top: 28px;
  padding-bottom: 72px;
}

.cs-page-head__title {
  margin: 6px 0 0 0 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  color: var(--cs-text);
}

/* --- G7: focus states and touch targets. */
:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

.cs-usp-bar :focus-visible,
.cs-footer :focus-visible,
.cs-section--blue :focus-visible,
.cs-section--dark :focus-visible {
  outline-color: #fff;
}

.value-button,
.cart-minus,
.cart-plus {
  min-width: 44px;
  min-height: 44px;
}

/* --- Header 02/04 note ---
   The review suggested replacing .main-menu-container's padding-left:140px
   with the shared 1280 container, and gridding ".megamenu".  Neither applies
   to THIS theme:
     * the logo sits in the same band as the menu, and the 140px padding is
       what clears it - removing it slides the first menu item under the logo;
     * ".megamenu" here is the top-level <li>, not a dropdown column, so
       display:grid on it blows every nav item up to a 4-column grid.
   The nav therefore keeps the theme's own float layout.  Only the dropdown
   panel columns are gridded, scoped to the actual container. */
#nav ul.sub .menu-sub-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 24px;
}

#nav ul.sub .menu-sub-container .box {
  width: auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 991px) {
  #nav ul.sub .menu-sub-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Home 02: tiles and mosaic cropped admin banners badly. */
.cs-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-tile {
  height: auto;
  aspect-ratio: 4 / 5;
}

.cs-mosaic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-mosaic__item {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.cs-mosaic__item img {
  min-height: 0;
}

.cs-tile img,
.cs-mosaic__item img {
  object-position: center;
}

@media (max-width: 767px) {
  .cs-tiles,
  .cs-mosaic { grid-template-columns: 1fr; }
}

/* --- Home 03: badge colour came from :nth-child, so re-ordering banners in
   admin shuffled the colours. One accent for all of them. */
.cs-tile:nth-child(2) .cs-tile__badge,
.cs-tile:nth-child(3) .cs-tile__badge {
  background: var(--cs-red);
}

/* --- Home 04: give the page a rhythm instead of eight identical sections. */
.cs-section .cs-section__inner,
.cs-section--soft .cs-section__inner {
  padding-top: 56px;
  padding-bottom: 56px;
}

.cs-section--blue .cs-section__inner,
.cs-section--dark .cs-section__inner {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* --- Listing 01: cards were uneven because the product name had no clamp. */
ul.categorie .pro-info h6 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-weight: 500 !important;
}

ul.categorie .pro-info img.img-fluid {
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/* --- Listing 02: price must read as the price. */
ul.categorie .pro-info h4 {
  font-size: 18px !important;
  font-weight: 900 !important;
}

/* --- Listing 03: three filter cards become one panel. */
.filters-sidebar {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-box);
  overflow: hidden;
}

@media (min-width: 992px) {
  .filters-sidebar {
    position: sticky;
    top: 96px;
  }
}

.filters-sidebar .gender-filter-card,
.filters-sidebar .brand-filter-card,
.filters-sidebar .price-filter-card {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--cs-border) !important;
  box-shadow: none !important;
}

.filters-sidebar > div:last-child {
  border-bottom: 0 !important;
}

/* --- Listing 04: category icon was bigger than the title. */
.p-20-cont .section-title img {
  height: 40px !important;
}

/* --- Listing 06: the ellipsis separator should not look clickable. */
div.pagination span:not([class]) {
  border: 0 !important;
  background: transparent !important;
  min-width: 0;
  padding: 0 4px !important;
}

/* --- Product 01: real class for the description block. */
.cs-product-desc {
  clear: both;
  float: none;
  width: 100%;
  max-width: 1280px;
  margin: 8px auto 48px auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .cs-product-desc { padding: 0 20px; }
}

/* --- Product 02: price row stacked, old price + discount demoted. */
.price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

#price-old,
#guest-member-price-old,
#content span.badge {
  font-size: 14px !important;
}

#content span.badge {
  padding: 4px 10px !important;
}

/* --- Product 03: selected swatch had a white ring on a white card. */
.variation_select_box img {
  outline: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cs-blue);
}

.disabled_variation {
  opacity: 1;
  text-decoration: line-through;
}

/* --- Product 04: only one action should look primary. */
.add_more {
  background: transparent !important;
  color: var(--cs-text) !important;
  border: 2px solid var(--cs-dark) !important;
}

.add_more:hover {
  background: var(--cs-dark) !important;
  color: #fff !important;
}

/* --- Product 05: thumbnail strip as an even grid. */
#small-img-roll {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
}

.show-small-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-right: 0 !important;
}

/* --- Cart 02: the summary is its own card instead of three stacked whites. */
.totalcart {
  background: #fff !important;
  border: 1px solid var(--cs-border);
  border-top: 2px solid var(--cs-blue);
  border-radius: var(--cs-radius-box);
  padding: 22px !important;
}

.shipping-row {
  background: var(--cs-bg-soft);
  border: 0;
}

/* --- Cart 04: step badge should not shout louder than the step title. */
.dropcap2 {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

.cart-box h4 {
  font-size: 20px !important;
  gap: 10px;
}

/* --- Cart 05: the payment tile is the control. */
#payment-form .form-check-input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#payment-form .form-check-label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 1.5px solid var(--cs-border-input);
  border-radius: var(--cs-radius-input);
  background: #fff;
  max-width: 320px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#payment-form .form-check-label:hover {
  border-color: var(--cs-blue);
}

#payment-form .form-check-input[type="radio"]:checked + .form-check-label {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(29, 62, 150, 0.15);
}

#payment-form .form-check-label img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 130px !important;
  height: auto;
}

/* --- Cart 06: four text sizes instead of seven. */
.addon-row,
.addon-label,
.addon-price {
  font-size: 13px !important;
}

.tile-cartp,
.newsletter-checkbox label {
  font-size: 15px !important;
}

.toalamoint li h5,
.toalamoint li h6 {
  font-size: 15px !important;
}

.toalamoint .total-amount {
  font-size: 24px;
}

/* --- Login 01: the auth pages were never covered by the skin. */
.text-box,
input[type="text"].text-box,
input[type="password"].text-box,
.cs-auth input[type="text"],
.cs-auth input[type="email"],
.cs-auth input[type="password"],
.cs-auth input[type="tel"],
.cs-auth select,
.cs-auth textarea {
  font-family: var(--cs-font) !important;
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: var(--cs-radius-input) !important;
  background: #fff !important;
  color: var(--cs-text) !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none;
  box-sizing: border-box;
}

.text-box:focus,
.cs-auth input:focus,
.cs-auth select:focus,
.cs-auth textarea:focus {
  border-color: var(--cs-blue) !important;
}

.cs-auth label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
  margin-bottom: 6px !important;
  display: inline-block;
}

/* --- Login 02/03: one primary action, secondary as links, capped width. */
.cs-auth__form {
  max-width: 420px;
}

.cs-auth__form h1 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  margin-bottom: 18px;
}

.cs-auth__form input[type="submit"] {
  width: 100%;
}

.cs-auth__links {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cs-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--cs-blue) !important;
}

.cs-link:hover {
  color: var(--cs-red) !important;
}

.cs-auth__sep {
  color: var(--cs-text-faint);
}

.cs-auth__img {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--cs-radius-box);
  box-shadow: var(--cs-shadow-card);
  display: block;
}

/* the old teal survives on .cyan buttons elsewhere in auth/ */
.button.cyan,
.button.thin.cyan {
  background: var(--cs-blue) !important;
  color: #fff !important;
}

.button.cyan:hover {
  background: var(--cs-red) !important;
}

/* --- Account pages: shared nav + tokenised forms. */
.cs-account-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--cs-border);
}

.cs-account-nav a {
  display: inline-block;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.cs-account-nav a:hover {
  color: var(--cs-blue) !important;
}

.cs-account-nav a.is-active {
  color: var(--cs-blue) !important;
  border-bottom-color: var(--cs-red);
}

@media (max-width: 767px) {
  .cs-account-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cs-account-nav a { white-space: nowrap; }
}

.cs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  max-width: 720px;
}

.cs-form-grid .form-group,
.cs-form-grid > div {
  min-width: 0;
}

.cs-form-grid input,
.cs-form-grid select,
.cs-form-grid textarea {
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .cs-form-grid { grid-template-columns: 1fr; }
}

/* --- Profile form: promote the sr-only labels, quiet the group caption. */
.cs-profile-form .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

.cs-profile-form .text-16 {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cs-text);
}

.cs-profile-form .mb-3 {
  margin-bottom: 26px;
}

.cs-profile-form .form-control {
  margin-bottom: 0 !important;
}

.cs-profile-form .input-group {
  margin-bottom: 0 !important;
}

/* --- Listing 04: clamp the admin category description to three lines
   (it is often a full size chart) with a "vis mer" toggle. */
.cs-cat-desc {
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  font-family: var(--cs-font) !important;
}

.cs-cat-desc .cs-cat-desc__text {
  font-family: var(--cs-font) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--cs-text-muted) !important;
  max-width: 900px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-cat-desc.is-open .cs-cat-desc__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.cs-cat-desc__toggle {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--cs-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-blue);
  cursor: pointer;
}

.cs-cat-desc__toggle:hover {
  color: var(--cs-red);
}

/* the legacy theme styles bare blockquotes with Lato */
blockquote,
blockquote p {
  font-family: var(--cs-font) !important;
}

/* --- Cart 05 (cont.): the selected payment tile must be unmistakable.
   The :checked + label sibling rule proved unreliable here, so cart.php also
   sets .is-selected on the active tile. Both are styled the same. */
#payment-form .form-check-input[type="radio"]:checked + .form-check-label,
#payment-form .form-check-label.is-selected {
  /* outline rather than border-color: a legacy !important rule further up the
     cascade pins the label border colour, and outline is not affected by it */
  outline: 2px solid var(--cs-blue) !important;
  outline-offset: -2px !important;
  background: #F7F9FF !important;
}

#payment-form .form-check-label.is-selected::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--cs-blue);
  box-shadow: inset 0 0 0 3px #fff;
  flex-shrink: 0;
}

/* --- G7 (cont.): the cart.php style block sets min-width/min-height 40px on
   the steppers after this file loads, so the 44px target needs to insist. */
.value-button,
.cart-minus,
.cart-plus {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ==========================================================================
   13. DESIGN-EXACT (approved mockups win)
   Measured off the approved bundles in
   "Comet Sport website redesign/cometsport-site" (index / produkter /
   produkt / handlekurv) rendered at 1440px.
   Where the written review conflicted with the approved design, the design
   wins - those reverts are marked (was review …).
   ========================================================================== */

/* --- radii: the design uses 14px cards / 16px panels / 12px small / 10px
   inputs. (was review G5: collapse to two) --- */
:root {
  --cs-radius-card: 14px;
}

/* --- HERO ---------------------------------------------------------------- */
/* design: section #F5F5F2, inner 1280 / 72px 32px 80px, gap 56 */
.cs-hero__inner {
  padding: 72px 32px 80px 32px;
  gap: 56px;
}

/* design keeps the offset blue panel and the deep shadow (was review home 01) */
.cs-hero__media-bg {
  display: block;
}

.cs-hero__img {
  width: 92%;
  height: 440px;
  border-radius: 16px;
  box-shadow: 0 32px 64px rgba(16, 26, 46, 0.22);
}

@media (max-width: 900px) {
  .cs-hero__media-bg { display: none; }
  .cs-hero__img { width: 100%; height: 300px; }
}

/* --- SECTION RHYTHM ------------------------------------------------------ */
/* design: every section inner is 1280 wide with 72-80px vertical padding
   (was review home 04: 56/96 alternating) */
.cs-section .cs-section__inner,
.cs-section--soft .cs-section__inner,
.cs-section--blue .cs-section__inner,
.cs-section--dark .cs-section__inner {
  max-width: 1280px;
  padding: 72px 32px 80px 32px;
}

.cs-section-head {
  margin-bottom: 28px;
}

/* --- CATEGORY TILES ------------------------------------------------------ */
/* design: auto-fit minmax(280px,1fr), gap 20, fixed 400px, radius 14 */
.cs-tiles {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cs-tile {
  height: 400px;
  aspect-ratio: auto;
  border-radius: var(--cs-radius-card);
}

.cs-tile__badge {
  top: 16px;
  left: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: 999px;
}

/* --- CAMPAIGN MOSAIC ----------------------------------------------------- */
.cs-mosaic {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cs-mosaic__item {
  border-radius: 16px;
  aspect-ratio: 3 / 2;
}

@media (max-width: 767px) {
  .cs-tiles { grid-template-columns: 1fr; }
  .cs-tile { height: 300px; }
  .cs-mosaic { grid-template-columns: 1fr; }
}

/* --- PRODUCT CARDS (home + listing) -------------------------------------- */
/* design: border 1px #ECEDE9, radius 14, media 240px on #F4F5F2,
   body 18px 20px 20px / gap 6, brand 12/800/.1em #8A93A3,
   name 16/700/1.3, price 17/800 */
.cs-products-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cs-product-card {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-card);
}

.cs-product-card__media {
  height: 240px;
  background: #F4F5F2;
}

.cs-product-card__body {
  padding: 18px 20px 20px 20px;
  gap: 6px;
}

.cs-product-card__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cs-text-muted);
}

.cs-product-card__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.cs-product-card__price {
  font-size: 17px;
  font-weight: 800;
  margin-top: 4px;
}

/* --- LISTING CARDS (produkter.html) -------------------------------------- */
/* design: grid auto-fill minmax(230px,1fr) gap 20; body 16/18/18 gap 5;
   brand 11.5/700/.1em; name 15.5/700/1.3; price 16/800 */
ul.categorie {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 20px !important;
}

ul.categorie .pro-info {
  border-radius: var(--cs-radius-card) !important;
  padding-bottom: 18px !important;
}

ul.categorie .pro-info .sold_out,
ul.categorie .pro-info .img-wrap {
  background: #F4F5F2;
}

ul.categorie .pro-info h6 {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 16px 18px 0 18px;
}

ul.categorie .pro-info h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 6px 0 12px 0 !important;
  padding: 0 18px;
}

ul.categorie .pro-info .btn-secondary {
  margin: auto 18px 0 18px;
}

/* --- CART (handlekurv.html) ---------------------------------------------- */
/* design page column is 1180 wide, not 1280 */
body.cs-cart-page .container:not([class*="col-"]) {
  max-width: 1180px;
}

/* design: line item = 1px #ECEDE9, radius 14, padding 18, gap 18 */
.productlis-cart {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-card);
  padding: 18px;
  gap: 18px;
}

/* design summary card: #F5F5F2, radius 16, padding 28, gap 14
   (was review cart 02: white card with a blue top rule) */
.totalcart {
  background: var(--cs-bg-soft) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 16px;
  padding: 28px !important;
}

.totalcart .toalamoint li h5,
.totalcart .toalamoint li h6 {
  font-size: 14.5px !important;
  color: var(--cs-text-mid) !important;
}

.totalcart .total-amount {
  font-size: 24px;
  font-weight: 900;
  color: var(--cs-text);
}

/* design keeps the shipping row on white inside the grey summary */
.shipping-row {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px !important;
}

/* the checkout CTA in the design is the red pill */
#payment-form button[type="submit"],
#payment-form .button.medium.blue {
  background: var(--cs-red) !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  letter-spacing: 0.05em;
}

#payment-form button[type="submit"]:hover,
#payment-form .button.medium.blue:hover {
  background: var(--cs-dark) !important;
}

/* --- PRODUCT DETAIL (produkt.html) --------------------------------------- */
/* design gallery frame: 520px, radius 16, #F4F5F2, 1px border */
.big-img {
  border-radius: 16px;
  background: #F4F5F2;
  border: 1px solid var(--cs-border);
}

/* design thumbs: 4 columns, 90px tall, radius 12, 2px border */
#small-img-roll {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.show-small-img {
  border-radius: 12px;
  border: 2px solid var(--cs-border);
  aspect-ratio: auto;
  height: 90px !important;
}

.show-small-img.active,
.show-small-img:hover {
  border-color: var(--cs-blue);
}

/* design size buttons: 52px min, radius 10, 2px border, 14.5/700 */
.variation_box {
  min-width: 52px;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

/* design add-to-cart: full-width red pill, 15/800, 16px 32px */
.add_to_cart,
#add_only,
#append_only {
  font-size: 15px !important;
  padding: 16px 32px !important;
  letter-spacing: 0.05em;
}

/* --- HEADER, design-exact (SiteHeader.dc.html) ---------------------------
   Row 1 USP bar, row 2 logo | search | Min side + Handlekurv pill,
   row 3 category nav with the red active underline. */
#nav,
#nav.header-1,
#nav .header-wrapper {
  background: #fff !important;
  border-bottom: 0;
}

.cs-header__main {
  background: #fff;
  border-bottom: 1px solid var(--cs-border);
}

.cs-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.cs-header__logo {
  flex-shrink: 0;
  display: block;
}

.cs-header__logo img {
  height: 54px !important;
  width: auto;
  display: block;
  padding: 0 !important;
}

/* search */
.cs-header__search {
  flex: 1;
  min-width: 220px;
  max-width: 560px;
  position: relative;
  margin: 0;
}

.cs-header__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px 12px 44px !important;
  border: 1.5px solid var(--cs-border-input) !important;
  border-radius: 999px !important;
  font-family: var(--cs-font) !important;
  font-size: 14px !important;
  color: var(--cs-text) !important;
  background: var(--cs-bg-input) !important;
  outline: none;
  height: auto !important;
}

.cs-header__search input:focus {
  border-color: var(--cs-blue) !important;
  background: #fff !important;
}

/* magnifier drawn with two elements, exactly as the mockup does */
.cs-header__search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid var(--cs-text-muted);
  border-radius: 999px;
  display: block;
  pointer-events: none;
}

.cs-header__search-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 7px;
  height: 2px;
  background: var(--cs-text-muted);
  transform: rotate(45deg);
  display: block;
}

/* account + cart */
.cs-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.cs-header__account,
.cs-header__logout {
  font-family: var(--cs-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-text) !important;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.cs-header__account:hover,
.cs-header__logout:hover {
  background: var(--cs-bg-hover);
  color: var(--cs-text) !important;
}

.cs-header__cart {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cs-dark);
  color: #fff !important;
  font-family: var(--cs-font);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.cs-header__cart:hover {
  background: var(--cs-red);
  color: #fff !important;
}

.cs-header__cart .badge,
.cs-header__cart #lblCartCount {
  background: var(--cs-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-sizing: border-box;
}

/* nav row.
   The legacy theme absolutely-positions .main-menu-container so it sits ON
   TOP of the logo band (which is why it needed padding-left:140px there).
   The design stacks three rows, so it has to flow normally - otherwise it
   covers the logo, search and cart row completely. */
#nav .main-menu-container {
  position: static !important;
  background: #fff;
  border-bottom: 1px solid var(--cs-border);
  padding-left: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

#nav .main-menu-container .container-m-30 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

#nav .nav.navbar-nav > li > a {
  padding: 16px 18px !important;
}

#nav .main-menu-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  padding: 0 !important;
}

/* the mobile hamburger only exists below the breakpoint */
.menu-btn-respons-container {
  display: none;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .cs-header__inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
  }

  .cs-header__logo img { height: 40px !important; }

  .cs-header__search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .cs-header__actions { gap: 8px; }

  .cs-header__account,
  .cs-header__logout { padding: 8px 10px; font-size: 13px; }

  .cs-header__cart { padding: 9px 14px; font-size: 13px; }

  .menu-btn-respons-container { display: block; }

  #nav .main-menu-container .container-m-30 { padding: 0; }
}

/* the legacy overlay search is gone; make sure its leftovers stay hidden */
.cd-header-buttons,
.cd-search {
  display: none !important;
}

/* --- design-exact vertical rhythm: the legacy theme adds leading to inputs
   and nav links, which made every header control 5-6px taller than the
   mockup. Pin the content boxes to the measured design heights. --- */
.cs-header__search input {
  line-height: 14px !important;   /* design input box = 41px tall */
}

.cs-header__cart,
.cs-header__account,
.cs-header__logout {
  line-height: 20px !important;   /* design pill box = 42px / link = 40px */
}

#nav .main-menu-title {
  line-height: 17px !important;   /* design nav item box = 49px tall */
}

/* the theme puts its own 2px border under each nav <a>; the red active rule
   lives on the <li>, so drop it to hit the design's 49px item box */
#nav .nav.navbar-nav > li > a {
  border-bottom: 0 !important;
}

/* --- CART page frame, design-exact (handlekurv.dc.html) ---
   container 1180 / 40px 32px 80px, h1 44/900 uppercase with 28px below. */
body.cs-cart-page #content,
body.cs-cart-page .container:not([class*="col-"]) {
  max-width: 1180px;
}

body.cs-cart-page section {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}

body.cs-cart-page .cart-box h4 {
  letter-spacing: -0.01em;
}

/* summary sticks like the mockup */
@media (min-width: 992px) {
  .totalcart {
    position: sticky;
    top: 24px;
  }
}

/* design summary internals */
.totalcart h2,
.totalcart .toalamoint {
  font-family: var(--cs-font);
}

.totalcart .toalamoint li h5 b {
  font-weight: 700;
}

/* --- MEGAMENU, design-exact (SiteHeader.dc.html dropdown panels) ----------
   The panel itself, its 1280 inner column and the club chips. The items are
   still generated from assets/comet/xml/menu.xml - only the presentation
   changes, so adding/removing clubs in the XML keeps working. */
#nav ul.sub {
  border-top: 1px solid var(--cs-border) !important;
  box-shadow: 0 32px 56px rgba(16, 26, 46, 0.14) !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#nav ul.sub .menu-sub-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 36px 32px !important;
  gap: 2px 24px;
  align-content: start;
  max-height: 460px;
  overflow-y: auto;
}

#nav ul.sub .box {
  width: auto;
  float: none;
  padding: 0 !important;
  margin: 0 !important;
}

#nav ul.sub .box > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav ul.sub .box ul li {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* the link row: icon chip + label */
#nav ul.sub .box ul li a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 7px 10px !important;
  border-radius: 8px;
  color: var(--cs-dark) !important;
  font-family: var(--cs-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#nav ul.sub .box ul li a:hover {
  background: var(--cs-bg-hover) !important;
  color: var(--cs-blue) !important;
}

/* club / category logo rendered as the design's round white chip */
#nav ul.sub .box ul li a img,
#nav .clubIcon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  border-radius: 999px !important;
  background: #fff;
  border: 1px solid var(--cs-border) !important;
  padding: 2px !important;
  margin: 0 !important;
  object-fit: contain;
  box-sizing: border-box;
  flex-shrink: 0;
}

#nav ul.sub .box ul li a span {
  display: inline-block;
  min-width: 0;
}

/* menus with few entries should not stretch to four sparse columns */
@media (min-width: 992px) {
  #nav ul.sub .menu-sub-container {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

@media (max-width: 991px) {
  #nav ul.sub {
    box-shadow: none !important;
    position: static !important;
  }

  #nav ul.sub .menu-sub-container {
    grid-template-columns: 1fr;
    padding: 8px 12px !important;
    max-height: none;
  }
}
/* ==========================================================================
   Comet Sport redesign — patch pack (2026-08)
   APPEND this file to the END of assets/shop/redesign/comet-redesign.css
   (or load it after it). Every value below comes from the approved mockups:
   Hjem / Produkter / Produkt / Handlekurv + SiteHeader / SiteFooter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P1 — PRODUCT SINGLE gallery. Root cause: assets/shop/css/style.css:934 pins
   .big-img .show to 400x400 and sets object-fit:cover on an <img> that has no
   width/height, so a small source image renders at its natural size in the
   top-left of the frame and a large one crops. The mockup frame is
   100% x 520px, radius 16, #F4F5F2, and the image is contain-fitted.
   -------------------------------------------------------------------------- */
.big-img .show {
  width: 100% !important;
  height: 520px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 !important;
}

.big-img .show > img,
.big-img .show #show-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  padding: 32px;
  box-sizing: border-box;
  display: block;
}

/* A 300px product photo must not be upscaled into mush: cap it at its own
   pixel size and let the frame do the centring. */
.big-img .show > img.cs-img-small,
.big-img .show #show-img.cs-img-small {
  width: auto !important;
  height: auto !important;
  padding: 0;
}

@media (max-width: 991px) { .big-img .show { height: 420px !important; } }
@media (max-width: 600px)  {
  .big-img .show { height: 320px !important; }
  .big-img .show > img { padding: 18px; }
}

/* Thumbnail strip. product_single.php has its own <style> block in the body
   (loads after the skin), hence !important: it sets inline-flex + 80x80 +
   opacity .6, which killed the skin's 4-column grid. */
.small-container {
  overflow: visible !important;
  white-space: normal !important;
  max-width: 100% !important;
}

.small-img {
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  margin: 12px 0 24px 0 !important;
}

#small-img-roll {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100%;
}

.show-small-img {
  width: 100% !important;
  height: 90px !important;
  margin: 0 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #F4F5F2;
  border: 2px solid var(--cs-border) !important;
  border-radius: 12px !important;
  padding: 6px;
  box-sizing: border-box;
}

.show-small-img.active,
.show-small-img:hover { border-color: var(--cs-blue) !important; }

/* the mockup gallery has no carousel arrows */
.small-img .icon-left,
.small-img .icon-right { display: none !important; }

/* --------------------------------------------------------------------------
   P2 — EMPTY / NO-RESULT STATE (search with 0 hits, empty cart, filtered
   listing with 0 hits). Taken from the Handlekurv mockup's empty block:
   #F5F5F2 panel, radius 16, 72px 32px, 56px ring, 22/800 title, red pill.
   Markup for these lives in the PHP patches — see php-patches.md.
   -------------------------------------------------------------------------- */
.cs-empty {
  background: var(--cs-bg-soft);
  border-radius: var(--cs-radius-box);
  padding: 72px 32px;
  margin: 8px 0 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-family: var(--cs-font);
}

.cs-empty__mark {
  width: 56px;
  height: 56px;
  border: 3px solid #C9CDC7;
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
}

.cs-empty h2,
.cs-empty__title {
  margin: 0 !important;
  font-family: var(--cs-font);
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--cs-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
}

.cs-empty p,
.cs-empty__text {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cs-text-soft);
  max-width: 52ch;
}

.cs-empty__term { color: var(--cs-text); font-weight: 700; }

.cs-empty__cta {
  margin-top: 8px;
  background: var(--cs-red);
  color: #fff !important;
  font-family: var(--cs-font);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 30px;
  border: none;
  border-radius: var(--cs-radius-pill);
  display: inline-block;
  line-height: 1;
}

.cs-empty__cta:hover { background: var(--cs-dark); color: #fff !important; }

/* "prøv i stedet" chips under a failed search */
.cs-empty__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.cs-empty__suggest a {
  border: 1.5px solid var(--cs-border-input);
  background: #fff;
  border-radius: var(--cs-radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text-mid) !important;
}

.cs-empty__suggest a:hover {
  border-color: var(--cs-blue);
  color: var(--cs-blue) !important;
}

/* --------------------------------------------------------------------------
   P3 — LISTING / SEARCH PAGE HEADER. The mockup gives every listing page a
   soft band with breadcrumb, 44/900 uppercase H1 and an "N produkter" count.
   Search results currently render with no heading at all.
   -------------------------------------------------------------------------- */
.cs-listing-head {
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-border);
  font-family: var(--cs-font);
}

.cs-listing-head__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 32px;
}

.cs-listing-head__crumbs {
  font-size: 13px;
  color: var(--cs-text-muted);
  margin-bottom: 10px;
}

.cs-listing-head__crumbs a { color: var(--cs-text-muted) !important; }
.cs-listing-head__crumbs a:hover { color: var(--cs-blue) !important; }

.cs-listing-head__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.cs-listing-head h1 {
  margin: 0 !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--cs-text) !important;
  border: 0 !important;
}

.cs-listing-head__count {
  font-size: 14px;
  font-weight: 500;
  color: var(--cs-text-muted);
}

@media (max-width: 767px) {
  .cs-listing-head__inner { padding: 24px 20px; }
}

/* --------------------------------------------------------------------------
   P4 — MOBILE NAVIGATION. The megamenu opens on :hover only, so on touch the
   top-level link navigates and the panel is unreachable; in the drawer the
   panels were either all-open or unreachable. comet-nav.js adds a chevron
   button per item with a submenu and toggles li.cs-open.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #nav .main-menu-container { border-bottom: 0 !important; }

  #nav .navbar-collapse {
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    border-top: 1px solid var(--cs-border);
  }

  #nav .nav.navbar-nav { padding: 0 !important; }

  #nav .nav.navbar-nav > li {
    position: relative;
    padding: 0 !important;
    border-bottom: 1px solid var(--cs-border) !important;
    background: #fff !important;
  }

  #nav .nav.navbar-nav > li > a {
    display: block !important;
    padding: 15px 56px 15px 20px !important;
  }

  /* closed by default; the JS opens one at a time */
  #nav ul.sub { display: none !important; }
  #nav .nav.navbar-nav > li.cs-open > ul.sub { display: block !important; }

  #nav .nav.navbar-nav > li.cs-open { border-bottom-color: var(--cs-red) !important; }

  .cs-nav-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 50px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cs-nav-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--cs-text-mid);
    border-bottom: 2px solid var(--cs-text-mid);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
  }

  #nav .nav.navbar-nav > li.cs-open > .cs-nav-toggle::before {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--cs-red);
  }

  .cs-nav-toggle:focus-visible {
    outline: 2px solid var(--cs-blue);
    outline-offset: -2px;
  }
}

/* Desktop: the mockup has one cart affordance (the header pill), so the
   legacy floating bubble is mobile-only. */
@media (min-width: 992px) {
  .floating-cart { display: none !important; }
}

/* --------------------------------------------------------------------------
   P5 — HEADER SEARCH: submit affordance + clear. The form had no button, so
   the magnifier looked dead and there was no way to clear a query.
   -------------------------------------------------------------------------- */
.cs-header__search { display: flex; align-items: center; }

.cs-header__search-submit {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}

.cs-header__search-submit:hover { background: var(--cs-bg-hover); }
.cs-header__search .cs-header__search-icon { z-index: 1; }

.cs-header__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--cs-text-muted);
  font-family: var(--cs-font);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  display: none;
}

.cs-header__search-clear:hover { background: var(--cs-bg-hover); color: var(--cs-text); }
.cs-header__search.is-filled .cs-header__search-clear { display: block; }

/* --------------------------------------------------------------------------
   P6 — ACCESSIBILITY: one themed focus ring everywhere, 44px touch targets
   on the controls the design ships as pills.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .cs-empty__cta,
  .add_to_cart,
  #add_only,
  #append_only { min-height: 48px; }
}

/* patch 5: the megamenu panel is now wrapped in <li class="menu-sub-wrap">
   so ul.sub only contains list items. The wrapper must be transparent. */
#nav ul.sub > li.menu-sub-wrap {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 100%;
}

/* ==========================================================================
   14. KASSE & MIN SIDE  (design: "Comet Kasse og Min side.dc.html")
   Screens 01-05: checkout, order confirmation, login/register, profile,
   orders + order detail. Values taken from the mockup's inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Shared account layout — 250px sticky rail + content, gap 48
   -------------------------------------------------------------------------- */
.cs-account-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 991px) {
  .cs-account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* account rail (design: vertical links, 11px 14px, radius 10, active fill) */
.cs-account-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  position: sticky;
  top: 24px;
}

.cs-account-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--cs-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-text) !important;
  border: 0;
  margin: 0;
  white-space: nowrap;
}

.cs-account-nav a:hover {
  background: var(--cs-bg-hover);
  color: var(--cs-text) !important;
}

.cs-account-nav a.is-active {
  background: var(--cs-bg-soft);
  font-weight: 800;
  color: var(--cs-text) !important;
  border: 0;
}

.cs-account-nav a.cs-account-nav__logout {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cs-text-muted) !important;
}

.cs-account-nav__meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-text-muted);
}

@media (max-width: 991px) {
  .cs-account-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .cs-account-nav a { border-radius: 999px; }
  .cs-account-nav a.cs-account-nav__logout { margin-top: 0; }
  .cs-account-nav__meta { display: none; }
}

/* --------------------------------------------------------------------------
   14.2 Panels — the section card used across all five screens
   (1px #ECEDE9, radius 14, padding 24; head 15px/800/0.08em uppercase)
   -------------------------------------------------------------------------- */
.cs-panel {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-card);
  padding: 24px;
  background: #fff;
}

.cs-panel__head,
.cs-panel h2 {
  margin: 0 0 18px 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
}

.cs-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cs-field-grid + .cs-field-grid {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .cs-field-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14.3 Checkout (lives inside cart.php on this site)
   -------------------------------------------------------------------------- */
/* step strip: 24px circles, active blue, connectors 28x1 */
.cs-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 32px 0;
}

.cs-steps__step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

.cs-steps__step b {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--cs-border);
  color: var(--cs-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.cs-steps__step.is-active {
  color: var(--cs-text);
}

.cs-steps__step.is-active b {
  background: var(--cs-blue);
  color: #fff;
}

.cs-steps__step.is-done b {
  background: var(--cs-green);
  color: #fff;
}

.cs-steps__sep {
  width: 28px;
  height: 1px;
  background: var(--cs-border-input);
  display: inline-block;
}

@media (max-width: 600px) {
  .cs-steps__sep { width: 14px; }
  .cs-steps__step { font-size: 11.5px; }
}

/* the cart page's step boxes become the design's section cards */
body.cs-cart-page .cart-box {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-card) !important;
  padding: 24px !important;
  background: #fff !important;
  margin-bottom: 24px;
  box-shadow: none;
  border-bottom: 1px solid var(--cs-border) !important;
}

body.cs-cart-page .cart-box h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  margin: 0 0 18px 0 !important;
}

/* labels above inputs, design weight/size */
body.cs-cart-page label.zip {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 6px 0 !important;
}

body.cs-cart-page .giftinput {
  padding: 12px 16px !important;
  font-weight: 500 !important;
}

/* shipping select rendered as the design's option tile row is not possible
   without markup, so keep the select but give it the tile's proportions */
body.cs-cart-page select#shipping_and_pickup {
  padding: 14px 16px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}

/* payment tiles already match the design's option pattern (section 12) */
#payment-form .form-check-label {
  border-width: 2px !important;
  border-radius: 12px !important;
  padding: 16px !important;
  gap: 14px;
  max-width: 420px;
}

/* terms / newsletter checkbox row */
.newsletter-checkbox {
  padding-left: 0 !important;
  align-items: flex-start;
  gap: 12px;
}

.newsletter-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cs-red);
  margin: 2px 0 0 0;
}

.newsletter-checkbox label {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.6;
  color: var(--cs-text-soft);
}

/* summary: qty chip + mva note per the Kasse screen */
.totalcart .cs-summary__mva {
  font-size: 12.5px;
  color: var(--cs-text-muted);
}

/* --------------------------------------------------------------------------
   14.4 Order confirmation (thankyou*.php)
   -------------------------------------------------------------------------- */
.thank-you-container,
.confirmation-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 56px 32px 80px 32px !important;
}

.thank-you-card {
  background: var(--cs-bg-soft) !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 48px 40px !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}

.success-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: var(--cs-green) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 26px !important;
  font-weight: 900;
  margin: 0 !important;
}

.thank-you-title {
  margin: 8px 0 0 0 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  color: var(--cs-text) !important;
}

.thank-you-message {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--cs-text-soft) !important;
  max-width: 560px;
}

.thank-you-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.order-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 !important;
}

.order-info-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-text-muted) !important;
}

.order-info-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--cs-text) !important;
}

/* "what happens next" cards */
.cs-next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.cs-next-step {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-next-step b {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--cs-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.cs-next-step:nth-child(2) b { background: var(--cs-red); }
.cs-next-step:nth-child(3) b { background: var(--cs-dark); }

.cs-next-step h3 {
  margin: 6px 0 0 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--cs-text) !important;
  text-transform: none;
}

.cs-next-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cs-text-soft);
}

/* --------------------------------------------------------------------------
   14.5 Orders list + order detail
   -------------------------------------------------------------------------- */
.my-orders-container,
.order-detail-container {
  max-width: none !important;
  padding: 0 !important;
}

/* order row (design: 1px card, radius 14, 20px 22px, meta stacks) */
.order-card {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-card) !important;
  padding: 20px 22px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.order-card-header {
  display: flex !important;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.order-info-left,
.order-info-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.order-card .order-date {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--cs-text-mid) !important;
}

.order-card-footer {
  border-top: 1px solid var(--cs-border) !important;
  padding: 14px 0 0 0 !important;
  margin-top: 14px !important;
  background: none !important;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* status pill */
.payment-badge,
.order-status {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-block;
  font-family: var(--cs-font);
}

.payment-badge.payment-success {
  background: #EAF7F0 !important;
  color: var(--cs-green) !important;
}

/* order items inside a card */
.order-item {
  display: flex;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-card);
  padding: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.order-item-image img,
.order-item-image {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: #F4F5F2;
  border: 1px solid var(--cs-border);
  object-fit: contain;
  flex-shrink: 0;
}

.order-item-details {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* order detail info cards + totals panel */
.info-card {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-card) !important;
  padding: 24px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.info-card-header {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text) !important;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.info-label {
  font-size: 13px !important;
  color: var(--cs-text-soft) !important;
}

.info-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cs-text) !important;
}

.final-total-row {
  border-top: 1px solid #DDDFD9 !important;
  padding-top: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.final-total-row .info-value {
  font-size: 22px !important;
  font-weight: 900 !important;
}

.back-link {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--cs-blue) !important;
}

.page-title-detail,
.page-header-detail h1 {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  color: var(--cs-text) !important;
}

/* empty state on the orders page uses the shared component */
.empty-state {
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  background: var(--cs-bg-soft);
  padding: 56px 32px !important;
  text-align: center;
}

.empty-state-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--cs-text) !important;
}

.empty-state-message {
  font-size: 15px !important;
  color: var(--cs-text-soft) !important;
}

/* --------------------------------------------------------------------------
   14.6 Login / register — design: #F5F5F2 band, white 16px cards, 36px pad
   -------------------------------------------------------------------------- */
body[class*="cs-page-auth-"] .cs-auth {
  background: transparent;
}

.cs-auth__form {
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  max-width: 460px;
  box-sizing: border-box;
}

.cs-auth__form h1 {
  font-size: 26px !important;
  margin: 0 0 6px 0 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
}

.cs-auth label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
}

.cs-auth input[type="text"],
.cs-auth input[type="email"],
.cs-auth input[type="password"],
.text-box {
  padding: 13px 16px !important;
  font-weight: 500 !important;
}

.cs-auth__form input[type="submit"] {
  margin-top: 6px;
  padding: 15px 24px !important;
  font-size: 15px !important;
  background: var(--cs-red) !important;
}

.cs-auth__form input[type="submit"]:hover {
  background: var(--cs-dark) !important;
}

.cs-auth__links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cs-auth__links .cs-link {
  font-size: 13.5px;
  font-weight: 600;
}

.cs-auth__sep { display: none; }

/* field-level validation message, shared by auth + checkout */
.cs-field-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cs-red);
  display: block;
  margin-top: 6px;
}

.cs-input-invalid,
.is-invalid {
  border-color: var(--cs-red) !important;
  box-shadow: none !important;
}

/* The legacy sheet carries `#cat a { padding:0; font-size:16px }` (ID
   specificity), which outranks .cs-account-nav a. Match it with the id in the
   selector instead of adding another !important. */
#cat .cs-account-nav a,
#content .cs-account-nav a,
.cs-account-layout .cs-account-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--cs-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-text);
  border: 0;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

#cat .cs-account-nav a:hover,
#content .cs-account-nav a:hover,
.cs-account-layout .cs-account-nav a:hover {
  background: var(--cs-bg-hover);
  color: var(--cs-text);
}

#cat .cs-account-nav a.is-active,
#content .cs-account-nav a.is-active,
.cs-account-layout .cs-account-nav a.is-active {
  background: var(--cs-bg-soft);
  font-weight: 800;
  color: var(--cs-text);
}

#cat .cs-account-nav a.cs-account-nav__logout,
#content .cs-account-nav a.cs-account-nav__logout,
.cs-account-layout .cs-account-nav a.cs-account-nav__logout {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cs-text-muted);
}

/* same trick for the order rows and detail links inside #cat */
#cat .order-card a,
#cat .back-link {
  font-size: 13.5px;
  font-weight: 700;
  padding: 0;
}

/* QA corrections: allow content to shrink within grids instead of widening the page. */
.cs-tile { height: auto; }
.cs-tile img { height: auto; object-fit: contain; }
.cs-tile:hover img { transform: none; }
.cs-account-layout > *, .cs-account-nav, .cs-profile-form,
.cs-listing-head__row > *, .cs-form-grid, .order-table-container {
  min-width: 0;
  max-width: 100%;
}
.cs-listing-head h1, .order-detail-container .info-value,
.order-info-left, .cs-profile-form a {
  overflow-wrap: anywhere;
}
.cs-listing-head__crumbs, .cs-empty__text, .cs-empty__term {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}
.order-table-container { overflow-x: auto; }
.cs-account-layout .order-table { min-width: 640px; }
.cs-nav-toggle { display: none; }
.add_to_cart, #add_only, #append_only {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  padding: 16px 22px !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
.add_to_cart i { flex-shrink: 0; }
body.cs-cart-page .value-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
body.cs-cart-page .tablename .pname,
body.cs-cart-page .tile-cartp { min-width: 0; overflow-wrap: anywhere; }
body.cs-cart-page .tablename .pname img { flex-shrink: 0; }
body.cs-cart-page .tablename form, body.cs-cart-page .tablename input,
body.cs-cart-page .tablename a { pointer-events: auto; }
.cs-payment-option { width: 100%; padding: 0 15px; margin: 16px 0 0; }
#payment-form > .row { margin-left: 0; margin-right: 0; }
#payment-form .cs-payment-option .form-check-label {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.cs-payment-name { font-size: 15px; font-weight: 700; }
.cs-payment-name small { display: block; font-size: 12px; font-weight: 500; }
.cs-checkout-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 24px 15px 0; }
.cs-checkout-actions button { min-width: 0 !important; }
#cs-club-empty { margin-top: 20px; }
#cs-club-empty[hidden] { display: none; }
@media (max-width: 991px) {
  #nav .nav.navbar-nav > li { position: relative !important; }
  .cs-nav-toggle { display: flex; }
}
@media (max-width: 600px) {
  .cs-account-layout > .col-md-12 { padding-left: 0; padding-right: 0; }
  body.cs-cart-page .cart-box { padding: 16px !important; }
  body.cs-cart-page .tablename { display: flex !important; flex-direction: column; gap: 12px; }
  body.cs-cart-page .tablename.br-table { display: none !important; }
  body.cs-cart-page .tablename > li { width: 100% !important; min-width: 0; }
  body.cs-cart-page .tablename form { flex-wrap: wrap; }
  body.cs-cart-page .toalamoint { display: flex; justify-content: space-between; gap: 12px; }
  body.cs-cart-page .toalamoint > li { width: auto !important; min-width: 0; }
  body.cs-cart-page .toalamoint h5, body.cs-cart-page .toalamoint h6 { font-size: 14px !important; }
  .cs-checkout-actions button { flex: 1 1 140px; }
}