/* ============================================================
   DTS-huisstijl voor de shop — bewust minimaal gehouden.
   De navigatiebalk houdt zijn vertrouwde grijs (mydts.css) en
   krijgt alleen de rode "dooslijn" eronder plus een rode
   hover-onderstreping. De rest volgt de legacy-stijl.
   ============================================================ */

.page-nav-container {
  border-bottom: 3px solid #b10000;
}

.page-nav-container .nav-item a.level0 {
  position: relative;
  display: inline-block;
}

/* Rode onderstreping die bij hover van links naar rechts inschuift */
.page-nav-container .nav-item a.level0:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #e01414, #8f0000);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}

.page-nav-container .nav-item a.level0:hover:after {
  transform: scaleX(1);
}

/* ============================================================
   Rondingen, consequent door de hele shop:
   kaarttegels 12px, knoppen 10px, invoervelden/dropdowns 6px
   (zelfde maten als detailpagina en zijbanners)
   ============================================================ */

/* Productkaart-tegels in de grids (ook Best Sellers) */
ul.products-grid .item {
  border-radius: 12px;
  overflow: hidden;
}

/* Knoppen: shop-inhoud en de header (My Account, winkelwagen, zoekknop) */
.main-container .btn,
.main-container .button,
.page-header-container .btn-account,
.page-header-container .header-minicart .header-minicart-content,
.page-header-container .search-button {
  border-radius: 10px;
}

/* Invoervelden en dropdowns: licht gerond */
.main-container input[type="text"],
.main-container input[type="number"],
.main-container input[type="email"],
.main-container input[type="password"],
.main-container select,
.main-container textarea,
.page-header-container .header-search .input-box input {
  border-radius: 6px;
}

/* Categorie-dropdowns hebben in mydts.css een specifiekere regel met radius 0 */
.category-filters-container .category-filters select {
  border-radius: 6px;
}

/* Winkelwagen-knop in de header als één geheel: het losse icoonvlak
   knipt mee in de ronding, en bij klikken geen zwarte browser-focusring
   om een deel van de inhoud. Toetsenbord-focus krijgt een rode ring. */
.page-header-container .header-minicart .header-minicart-content {
  overflow: hidden;
}
.page-header-container .header-minicart .header-minicart-content:focus,
.page-header-container .header-minicart .header-minicart-content:focus *,
.page-header-container .header-minicart .header-minicart-content:active {
  outline: none;
}
.page-header-container .header-minicart .header-minicart-content:focus-visible {
  outline: 2px solid #b10000;
  outline-offset: 2px;
}

/* ============================================================
   Primaire (rode) knoppen: 3D-look met verloop, glansrand en
   indruk-effect; vettere letter tegen het fragiele beeld
   ============================================================ */
.main-container .btn-primary {
  background: linear-gradient(180deg, #d31414 0%, #b10000 55%, #8f0000 100%);
  border: 1px solid #7c0000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(177,0,0,.05), 0 1px 3px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.main-container .btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 14px rgba(177,0,0,.30), 0 2px 4px rgba(0,0,0,.15);
}

.main-container .btn-primary:active {
  filter: brightness(.97);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 2px 5px rgba(177,0,0,.25);
}