/**
 * bebarefoot.eu — category listing mobile
 * Shoptet Classic, mobile and small tablet only. v2
 */

@media (max-width: 991px) {
  body.type-category {
    --beb-mobile-ink: #211f1d;
    --beb-mobile-muted: #6b6762;
    --beb-mobile-line: #dedad4;
    --beb-mobile-white: #fff;
    color: var(--beb-mobile-ink);
    background: var(--beb-mobile-white);
    font-family: "Rolen DT", sans-serif;
  }

  body.type-category #content,
  body.type-category .content-inner {
    width: 100%;
    max-width: none;
  }

  body.type-category .category-title {
    margin: 24px 0 14px;
    color: var(--beb-mobile-ink);
    font-size: clamp(32px, 9vw, 40px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
  }

  /* Category intro: remove legacy green presentation. */
  body.type-category .category-perex,
  body.type-category .category-perex > * {
    background: transparent !important;
    color: var(--beb-mobile-muted) !important;
    font-family: inherit !important;
  }

  body.type-category .category-perex {
    position: relative;
    margin: 0 0 22px;
    padding: 0;
    font-size: 15px;
    line-height: 1.62;
  }

  body.type-category .category-perex > * {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.type-category .category-perex :where(h2, h3, h4) {
    margin: 0 0 8px !important;
    color: var(--beb-mobile-ink) !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.28 !important;
  }

  body.type-category .category-perex p {
    margin: 0 !important;
  }

  body.type-category .beb-mobile-perex.is-collapsed > :first-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  body.type-category .beb-mobile-perex-toggle {
    margin: 10px 0 0;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--beb-mobile-ink);
    font: 600 14px/1.3 "Rolen DT", sans-serif;
  }

  /* Horizontally scrollable category pills. */
  body.type-category .subcategories {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: calc(100% + 20px);
    margin: 0 -10px 26px 0 !important;
    padding: 0 10px 8px 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.type-category .subcategories::-webkit-scrollbar {
    display: none;
  }

  body.type-category .subcategories > li {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
  }

  body.type-category .subcategories > li > a {
    display: inline-flex !important;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 0 17px !important;
    border: 1px solid var(--beb-mobile-line) !important;
    border-radius: 999px !important;
    background: var(--beb-mobile-white) !important;
    color: var(--beb-mobile-ink) !important;
    text-decoration: none;
  }

  body.type-category .subcategories > li > a::before,
  body.type-category .subcategories > li > a::after,
  body.type-category .subcategories .image {
    display: none !important;
    content: none !important;
  }

  body.type-category .subcategories .text {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Sticky mobile Filter / Sort bar. */
  body.type-category .category-header {
    position: sticky;
    top: 50px;
    z-index: 80;
    display: block;
    min-height: 0;
    margin: 0 0 20px;
    padding: 9px 0;
    border-top: 1px solid var(--beb-mobile-line);
    border-bottom: 1px solid var(--beb-mobile-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
  }

  body.type-category .beb-mobile-category-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  body.type-category .beb-mobile-filter-button,
  body.type-category .beb-mobile-sort select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--beb-mobile-ink);
    border-radius: 999px;
    background: var(--beb-mobile-white);
    color: var(--beb-mobile-ink);
    font: 600 14px/1 "Rolen DT", sans-serif;
  }

  body.type-category .beb-mobile-filter-button {
    text-align: center;
  }

  body.type-category .beb-mobile-sort {
    position: relative;
    min-width: 0;
  }

  body.type-category .beb-mobile-sort::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
  }

  body.type-category .beb-mobile-sort select {
    padding-right: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
  }

  body.type-category .beb-mobile-category-toolbar .listItemsTotal {
    color: var(--beb-mobile-muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }

  body.type-category .beb-mobile-category-toolbar .listItemsTotal strong {
    color: var(--beb-mobile-ink);
    font-weight: 600;
  }

  body.type-category .category-header > .listSorting,
  body.type-category .category-header > .listItemsTotal,
  body.type-category .filters-unveil-button-wrapper {
    display: none !important;
  }

  /* Full-screen native Shoptet filter panel. */
  body.type-category.filters-visible {
    overflow: hidden;
  }

  body.type-category.filters-visible #filters {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 76px 20px 90px !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--beb-mobile-white) !important;
    color: var(--beb-mobile-ink);
  }

  body.type-category.filters-visible #filters .filters-unveil-button-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid var(--beb-mobile-line);
    background: var(--beb-mobile-white);
  }

  body.type-category.filters-visible #filters .filters-unveil-button-wrapper::before {
    color: var(--beb-mobile-ink);
    font: 600 22px/1.2 "Rolen DT", sans-serif;
    content: "Filters";
  }

  body.type-category.filters-visible #filters .filters-unveil-button-wrapper .unveil-button {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--beb-mobile-ink);
    border-radius: 999px;
    background: var(--beb-mobile-white);
    color: var(--beb-mobile-ink);
    font: 600 13px/40px "Rolen DT", sans-serif;
    text-decoration: none;
  }

  body.type-category #filters .filter-section {
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid var(--beb-mobile-line);
  }

  body.type-category #filters .filter-section h4 {
    margin: 0 0 16px;
    color: var(--beb-mobile-ink);
    font: 600 17px/1.35 "Rolen DT", sans-serif;
  }

  body.type-category #filters .filter-section fieldset > div {
    margin: 4px 0;
  }

  body.type-category #filters label.filter-label {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 4px 6px 36px;
    color: var(--beb-mobile-ink);
    font: 400 15px/1.45 "Rolen DT", sans-serif;
  }

  body.type-category #filters .filter-count {
    margin-left: auto;
    color: #8a857f;
    font-size: 11px;
  }

  body.type-category #manufacturer-filter:not(.beb-mobile-brands-expanded) .beb-mobile-brand-extra {
    display: none !important;
  }

  body.type-category .beb-mobile-brands-toggle {
    margin: 10px 0 0 36px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--beb-mobile-ink);
    font: 600 14px/1.3 "Rolen DT", sans-serif;
  }

  /* Size values remain compact touch-friendly bubbles. */
  body.type-category #filters .filter-section-parametric-id-5 fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.type-category #filters .filter-section-parametric-id-5 fieldset > div {
    min-width: 0;
    margin: 0;
  }

  body.type-category #filters .filter-section-parametric-id-5 label.filter-label {
    justify-content: center;
    min-height: 44px;
    padding: 5px 6px;
    border: 1px solid var(--beb-mobile-line);
    border-radius: 999px;
    text-align: center;
  }

  body.type-category #filters .filter-section-parametric-id-5 label.filter-label::before,
  body.type-category #filters .filter-section-parametric-id-5 label.filter-label::after,
  body.type-category #filters .filter-section-parametric-id-5 .filter-count {
    display: none !important;
  }

  body.type-category #filters .filter-section-parametric-id-5 input:checked + label.filter-label {
    border-color: var(--beb-mobile-ink);
    background: var(--beb-mobile-ink);
    color: var(--beb-mobile-white);
  }

  body.type-category .product .widget-parameter-wrapper {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 6px 0 8px;
    overflow: hidden;
  }

  body.type-category .product .widget-parameter-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body.type-category .product .widget-parameter-value a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 29px;
    padding: 0 6px;
    border: 1px solid var(--beb-mobile-line);
    border-radius: 999px;
    color: var(--beb-mobile-ink);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
  }

  body.type-category .product .widget-parameter-more {
    flex: 0 0 auto;
    margin-left: 5px;
    color: var(--beb-mobile-muted);
    font-size: 10px;
    white-space: nowrap;
  }

  /* Product grid is intentionally left to Shoptet's native two-column setting. */
  body.type-category .products-block {
    margin-top: 0;
  }
}

/* v2 — cleaner mobile category and On-inspired filter */
@media (max-width: 991px) {
  body.type-category,
  body.type-category :where(.category-title, .category-perex, .subcategories, .category-header, .products, #filters),
  body.type-category :where(.category-title, .category-perex, .subcategories, .category-header, .products, #filters) :where(a, button, select, label, h1, h2, h3, h4, h5, span) {
    font-family: "Rolen DT", sans-serif !important;
  }

  /* Subcategories are light text tabs, not pills. */
  body.type-category .subcategories {
    gap: 24px !important;
    margin-bottom: 22px !important;
    padding-bottom: 5px !important;
  }
  body.type-category .subcategories > li > a {
    position: relative;
    min-height: 42px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  body.type-category .subcategories .text {
    color: #5f5b57 !important;
    font-size: 15px !important;
    font-weight: 450 !important;
  }
  body.type-category .subcategories > li.active > a,
  body.type-category .subcategories > li.current > a,
  body.type-category .subcategories > li > a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--beb-mobile-ink);
  }

  /* Compact, consistent NEW / SALE labels. */
  body.type-category .products .flags {
    top: 10px !important;
    left: 10px !important;
  }
  body.type-category .products .flag,
  body.type-category .products .flag.flag-new,
  body.type-category .products .flag.flag-action,
  body.type-category .products .flag.flag-sale,
  body.type-category .products .flag.beb-flag-sale {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #d8422f !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  /* The image and title already lead to the product; a Detail button duplicates them. */
  body.type-category .products .product .p-tools {
    display: none !important;
  }

  /* Force the whole native panel and its inner Shoptet wrappers to true white. */
  body.type-category.filters-visible #filters,
  body.type-category.filters-visible #filters form,
  body.type-category.filters-visible #filters fieldset,
  body.type-category.filters-visible #filters .filter-sections,
  body.type-category.filters-visible #filters #category-filter-hover,
  body.type-category.filters-visible #filters .filter-section,
  body.type-category.filters-visible #filters .slider-wrapper {
    background: #fff !important;
    box-shadow: none !important;
  }

  body.type-category.filters-visible #filters {
    padding: 78px 24px 100px !important;
  }
  body.type-category.filters-visible #filters .filters-unveil-button-wrapper {
    padding-right: 24px;
    padding-left: 24px;
    border-bottom: 0 !important;
  }
  body.type-category #filters .filter-section {
    margin: 0 !important;
    padding: 22px 0 12px !important;
    border: 0 !important;
  }
  body.type-category #filters .filter-section + .filter-section {
    margin-top: 10px !important;
  }
  body.type-category #filters .filter-section h4 {
    margin-bottom: 13px !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em;
  }
  body.type-category #filters .filter-section fieldset > div {
    margin: 2px 0 !important;
  }
  body.type-category #filters label.filter-label {
    min-height: 46px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 15px !important;
    font-weight: 400 !important;
  }

  /* Counts stay quiet text; no legacy badge/background. */
  body.type-category #filters .filter-count {
    display: inline !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #918c86 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: inherit !important;
  }

  /* Size groups mirror desktop, with compact rectangular touch targets. */
  body.type-category #filters .filter-section-parametric-id-5 fieldset {
    display: block !important;
  }
  body.type-category #filters .beb-size-group {
    margin: 0 0 24px !important;
  }
  body.type-category #filters .beb-size-group__title {
    margin: 0 0 10px !important;
    color: var(--beb-mobile-ink) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: .01em;
    line-height: 1.35;
  }
  body.type-category #filters .beb-size-group__values {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body.type-category #filters .beb-size-group__values > div {
    min-width: 0;
    margin: 0 !important;
  }
  body.type-category #filters .filter-section-parametric-id-5 label.filter-label {
    min-height: 46px;
    padding: 5px 6px !important;
    border: 1px solid #dedad4 !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-weight: 500 !important;
  }
  body.type-category #filters .filter-section-parametric-id-5 input:checked + label.filter-label {
    border-color: var(--beb-mobile-ink) !important;
    background: var(--beb-mobile-ink) !important;
    color: #fff !important;
  }
  body.type-category #filters .filter-section-parametric-id-5 .filter-count {
    display: none !important;
  }
}

@media (max-width: 359px) {
  body.type-category .beb-mobile-category-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  body.type-category .beb-mobile-category-toolbar .listItemsTotal {
    grid-column: 1 / -1;
  }
}