@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

/* =========================================================
 ROOT
 ========================================================= */

:root {
 --bg: #000000;
 --panel: rgba(12, 12, 12, 0.96);
 --panel-2: rgba(18, 18, 18, 0.98);
 --card-bg: linear-gradient(180deg, rgba(22, 22, 22, 0.97) 0%, rgba(10, 10, 10, 0.99) 100%);
 --card-border: rgba(255, 255, 255, 0.08);
 --card-inner-border: rgba(255, 255, 255, 0.04);
 --title-bg: linear-gradient(180deg, rgba(14, 14, 14, 0.98) 0%, rgba(8, 8, 8, 1) 100%);
 --copy-bg: rgba(255, 255, 255, 0.02);
 --text: #ffffff;
 --muted: rgba(255, 255, 255, 0.78);
 --muted-2: rgba(255, 255, 255, 0.62);
 --shadow-dark: rgba(0, 0, 0, 0.82);
 --shadow-soft: rgba(255, 255, 255, 0.05);

 --red-glow-soft: rgba(255, 0, 0, 0.30);
 --red-glow-mid: rgba(255, 0, 0, 0.52);
 --red-glow-strong: rgba(255, 0, 0, 0.82);
 --red-glow-ultra: rgba(255, 40, 40, 1);

 --accent: #ff3c3c;
 --accent-deep: #8a0000;
 --accent-bright: #ff1a1a;

 --button-border: rgba(255, 255, 255, 0.16);
 --button-hover-border: rgba(255, 0, 0, 0.60);
 --button-hover-bg: linear-gradient(135deg, #7a0000, #e10000);

 --max-width: 1800px;
 --card-radius: 22px;
 --image-radius: 18px;

 --title-height: 100px;
 --image-height: 205px;
 --copy-height: 136px;
 --actions-height: 82px;
}

/* =========================================================
 SAFE SCOPED GLOBALS
 ========================================================= */

.lr-product-categories-section,
.lr-product-categories-section *,
.lr-product-categories-section *::before,
.lr-product-categories-section *::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body.page-product-categories {
 margin: 0;
 padding: 0;
 background: #000;
 color: var(--text);
 font-family: 'Fjalla One', sans-serif;
 background:
 radial-gradient(circle at top, rgba(130, 0, 0, 0.22), transparent 30%),
 linear-gradient(180deg, #050505 0%, #000 50%, #050505 100%);
 color: #fff;
 text-transform: uppercase;
 font-weight: bold;
 letter-spacing: 0.08em;
 line-height: 1.5;
 overflow-x: hidden;
}

.lr-product-categories-section img {
 display: block;
 max-width: 100%;
}

.lr-product-categories-section a {
 color: inherit;
 text-decoration: none;
}

/* =========================================================
 PAGE
 ========================================================= */

.lr-product-categories-section.product-categories-section {
 width: 100%;
 padding: 0 0 56px;
}

/* =========================================================
 GLOBAL RED HOVER GLOW
 ========================================================= */

.lr-product-categories-section .hover-red-glow {
 transition:
 transform 0.25s ease,
 box-shadow 0.25s ease,
 background 0.25s ease,
 border-color 0.25s ease,
 text-shadow 0.25s ease,
 color 0.25s ease,
 filter 0.25s ease;
}

.lr-product-categories-section .hover-red-glow:hover {
 box-shadow:
 0 0 18px var(--red-glow-soft),
 0 0 36px var(--red-glow-mid),
 0 0 60px var(--red-glow-strong),
 0 0 95px rgba(255, 0, 0, 0.38);
 filter: brightness(1.08);
}

/* =========================================================
 HERO
 ========================================================= */

.lr-product-categories-section .category-hero {
 position: relative;
 padding: 68px 20px 34px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 background:
 linear-gradient(180deg, rgba(18, 18, 18, 0.90), rgba(0, 0, 0, 0.96)),
 radial-gradient(circle at center, rgba(255, 0, 0, 0.16), transparent 40%);
 box-shadow: 0 0 28px rgba(0, 0, 0, 0.34);
}

.lr-product-categories-section .category-hero-main {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto 24px;
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 24px;
}

.lr-product-categories-section .category-hero-topline {
 display: block;
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto 10px;
 text-align: center;
 color: #ff3c3c;
 font-size: 12px;
 letter-spacing: 0.28em;
 text-shadow:
 0 0 10px rgba(255, 0, 0, 0.35),
 0 0 20px rgba(255, 0, 0, 0.18);
}

.lr-product-categories-section .category-hero-copy {
 max-width: 950px;
}

.lr-product-categories-section .category-hero-copy h1,
.lr-product-categories-section .glow-title {
 margin: 0 0 18px;
 font-size: clamp(38px, 6vw, 74px);
 line-height: 0.95;
 color: #fff;
 filter: brightness(1.12);
}

.lr-product-categories-section .glow-title {
 animation: lrRedGlowPulse 1.4s ease-in-out infinite;
 color: #fff;
}

@keyframes lrRedGlowPulse {
 0% {
 text-shadow:
 0 0 12px rgba(255, 0, 0, 0.40),
 0 0 24px rgba(255, 0, 0, 0.32),
 0 0 40px rgba(255, 0, 0, 0.22),
 0 0 65px rgba(255, 0, 0, 0.14);
 transform: scale(1);
 }
 50% {
 text-shadow:
 0 0 18px rgba(255, 0, 0, 0.95),
 0 0 34px rgba(255, 0, 0, 0.82),
 0 0 60px rgba(255, 0, 0, 0.68),
 0 0 100px rgba(255, 0, 0, 0.54),
 0 0 150px rgba(255, 0, 0, 0.36);
 transform: scale(1.02);
 }
 100% {
 text-shadow:
 0 0 12px rgba(255, 0, 0, 0.40),
 0 0 24px rgba(255, 0, 0, 0.32),
 0 0 40px rgba(255, 0, 0, 0.22),
 0 0 65px rgba(255, 0, 0, 0.14);
 transform: scale(1);
 }
}

.lr-product-categories-section .category-hero-copy p {
 max-width: 950px;
 margin: 0;
 color: rgba(255, 255, 255, 0.82);
 font-size: 15px;
 text-transform: none;
 letter-spacing: 0.03em;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 600;
}

.lr-product-categories-section .category-hero-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 14px;
}

.lr-product-categories-section .hero-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 12px 22px;
 border-radius: 999px;
 text-decoration: none;
 font-size: 13px;
 letter-spacing: 0.12em;
 cursor: pointer;
 box-sizing: border-box;
 transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lr-product-categories-section .hero-button-primary {
 background: linear-gradient(135deg, #8a0000, #ff1a1a);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow:
 0 0 16px rgba(255, 0, 0, 0.34),
 0 0 32px rgba(255, 0, 0, 0.20);
}

.lr-product-categories-section .hero-button-primary:hover {
 transform: translateY(-3px) scale(1.03);
 box-shadow:
 0 0 22px rgba(255, 0, 0, 0.55),
 0 0 42px rgba(255, 0, 0, 0.42),
 0 0 72px rgba(255, 0, 0, 0.28);
}

.lr-product-categories-section .hero-button-secondary {
 background: rgba(255, 255, 255, 0.04);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.16);
 box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

.lr-product-categories-section .hero-button-secondary:hover {
 transform: translateY(-3px) scale(1.03);
 border-color: rgba(255, 0, 0, 0.55);
 box-shadow:
 0 0 18px rgba(255, 0, 0, 0.30),
 0 0 34px rgba(255, 0, 0, 0.22),
 0 0 56px rgba(255, 0, 0, 0.16);
}

/* =========================================================
 TOOLBAR
 ========================================================= */

.lr-product-categories-section .category-toolbar {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto;
 display: grid;
 gap: 14px;
}

.lr-product-categories-section .category-toolbar-main {
 display: flex;
 gap: 14px;
 align-items: start;
 width: 100%;
}

.lr-product-categories-section .category-toolbar-actions {
 display: flex;
 gap: 14px;
 align-items: flex-start;
 justify-content: flex-end;
 flex-wrap: nowrap;
 flex: 0 0 auto;
}

.lr-product-categories-section .category-search-column {
 display: grid;
 gap: 14px;
 flex: 1 1 560px;
 min-width: 320px;
}

.lr-product-categories-section .category-search-wrap {
 width: 100%;
}

.lr-product-categories-section .category-search {
 height: 54px;
 width: 100%;
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 outline: none;
 background: rgba(12, 12, 12, 0.94);
 color: #fff;
 padding: 0 18px;
 font-family: 'Fjalla One', sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
}

.lr-product-categories-section .category-search::placeholder {
 color: rgba(255, 255, 255, 0.46);
}

.lr-product-categories-section .category-search:focus {
 border-color: rgba(255, 0, 0, 0.45);
 box-shadow:
 0 0 18px rgba(255, 0, 0, 0.24),
 0 0 34px rgba(255, 0, 0, 0.14);
}

.lr-product-categories-section .category-search-tags,
.lr-product-categories-section .quick-usecase-filters,
.lr-product-categories-section .category-filter-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
}

.lr-product-categories-section .category-sort-wrap {
 min-width: 210px;
 flex: 0 0 210px;
}

.lr-product-categories-section .category-sort {
 width: 100%;
 min-width: 210px;
 min-height: 54px;
 padding: 0 18px;
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 outline: none;
 background: #050505;
 color: #fff;
 font-family: 'Fjalla One', sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
 appearance: none;
 -webkit-appearance: none;
}

.lr-product-categories-section .category-sort option {
 background: #050505;
 color: #fff;
}

.lr-product-categories-section .button-clear-filters {
 width: auto;
 min-width: 160px;
 min-height: 54px;
 padding: 0 18px;
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 background: #050505;
 color: #fff;
 font-family: 'Fjalla One', sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
}

.lr-product-categories-section .category-filter-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
}

.lr-product-categories-section .filter-chip {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 12px 22px;
 border-radius: 999px;
 text-decoration: none;
 font-size: 13px;
 letter-spacing: 0.12em;
 cursor: pointer;
 box-sizing: border-box;
 appearance: none;
 background: rgba(255, 255, 255, 0.04);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
 transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lr-product-categories-section .filter-chip:hover,
.lr-product-categories-section .filter-chip.active {
 transform: translateY(-2px) scale(1.03);
 border-color: rgba(255, 0, 0, 0.60);
 box-shadow:
 0 0 18px rgba(255, 0, 0, 0.34),
 0 0 34px rgba(255, 0, 0, 0.26),
 0 0 58px rgba(255, 0, 0, 0.18);
 background: linear-gradient(135deg, #7a0000, #e10000);
 color: #fff;
}

/* =========================================================
 CONTENT
 ========================================================= */

.lr-product-categories-section .content {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto;
 padding: 30px 0 0;
}

.lr-product-categories-section .catalog-strip {
 text-align: center;
 margin-bottom: 24px;
}

.lr-product-categories-section .catalog-strip-title {
 margin: 0 0 8px;
 font-size: clamp(28px, 4vw, 42px);
 line-height: 1.1;
 text-shadow:
 0 0 12px rgba(255, 0, 0, 0.18),
 0 0 24px rgba(255, 0, 0, 0.10);
}

.lr-product-categories-section .catalog-strip-subtitle {
 max-width: 900px;
 margin: 0 auto;
 color: rgba(255, 255, 255, 0.78);
 font-size: 14px;
 letter-spacing: 0.06em;
 text-transform: none;
 font-family: Arial, Helvetica, sans-serif;
}

/* =========================================================
 CARDS GRID
 ========================================================= */

.lr-product-categories-section .product-categories {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 22px;
 align-items: stretch;
}

.lr-product-categories-section .product-category {
 position: relative;
 display: grid;
 grid-template-rows: auto auto;
 min-height: calc(var(--title-height) + var(--image-height) + var(--copy-height) + var(--actions-height) + 56px);
 padding: 0;
 border-radius: 6px;
 background: linear-gradient(180deg, rgba(17, 17, 17, 0.96), rgba(5, 5, 5, 0.98));
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow:
 0 0 10px rgba(255, 0, 0, 0.08),
 0 0 24px rgba(0, 0, 0, 0.36);
 color: #fff;
 overflow: hidden;
 box-sizing: border-box;
 transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.lr-product-categories-section .product-category::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 border-radius: inherit;
 border: 1px solid rgba(255, 255, 255, 0.04);
}

.lr-product-categories-section .product-category:hover {
 transform: none;
 border-color: rgba(255, 0, 0, 0.55);
 box-shadow:
 0 12px 24px rgba(0, 0, 0, 0.28),
 0 0 0 1px rgba(255, 0, 0, 0.10) inset;
}

.lr-product-categories-section .category-link {
 display: grid;
 grid-template-rows: var(--title-height) var(--image-height) var(--copy-height);
 gap: 14px;
 padding: 18px;
 padding-bottom: 0;
 height: auto;
 min-height: 0;
}

.lr-product-categories-section .category-title-bar {
 min-height: var(--title-height);
 height: var(--title-height);
 padding: 14px;
 border-radius: 0;
 background: rgba(12, 12, 12, 0.94);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 0 18px rgba(0, 0, 0, 0.22);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 overflow: hidden;
}

.lr-product-categories-section .category-title-top {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 8px;
 margin-bottom: 8px;
}

.lr-product-categories-section .category-badge {
 display: inline-flex;
 align-items: center;
 min-height: 30px;
 padding: 6px 12px;
 border-radius: 6px;
 font-size: 11px;
 line-height: 1;
 box-sizing: border-box;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.10);
 color: #fff;
 box-shadow:
 0 0 10px rgba(255, 0, 0, 0.10),
 inset 0 0 10px rgba(255, 0, 0, 0.04);
}

.lr-product-categories-section .product-category h2 {
 margin: 0;
 font-size: 22px;
 line-height: 1.1;
 color: #fff;
 text-align: left;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-shadow:
 0 0 8px rgba(255, 0, 0, 0.10),
 0 0 16px rgba(255, 0, 0, 0.05);
}

.lr-product-categories-section .category-picture {
 position: relative;
 border-radius: 6px;
 overflow: hidden;
 background: #050505;
 border: 1px solid rgba(255, 255, 255, 0.06);
 height: var(--image-height);
 min-height: var(--image-height);
}

.lr-product-categories-section .category-picture::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28));
 pointer-events: none;
}

.lr-product-categories-section .category-picture img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 background: transparent;
 box-sizing: border-box;
}

.lr-product-categories-section .category-copy {
 min-height: var(--copy-height);
 height: var(--copy-height);
 padding: 16px 18px;
 border-radius: 0;
 background: rgba(12, 12, 12, 0.94);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 0 18px rgba(0, 0, 0, 0.22);
 display: flex;
 align-items: center;
 overflow: hidden;
}

.lr-product-categories-section .product-category p {
 margin: 0;
 min-height: 44px;
 color: rgba(255, 255, 255, 0.76);
 font-size: 12px;
 text-transform: none;
 letter-spacing: 0.03em;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 600;
 text-align: left;
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.lr-product-categories-section .category-actions {
 display: flex;
 gap: 10px;
 margin-top: auto;
 padding: 16px 18px 18px;
}

.lr-product-categories-section .category-actions .button-common {
 flex: 1 1 0;
 font-size: 11px;
 text-align: center;
}

/* =========================================================
 BUTTONS
 ========================================================= */

.lr-product-categories-section .button-common {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 12px 22px;
 border-radius: 6px;
 text-decoration: none;
 font-size: 13px;
 letter-spacing: 0.12em;
 cursor: pointer;
 box-sizing: border-box;
 appearance: none;
 transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lr-product-categories-section .button-shop {
 background: linear-gradient(135deg, #7a0000, #e10000);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.15);
 box-shadow: 0 0 18px rgba(255, 0, 0, 0.24);
}

.lr-product-categories-section .button-shop:hover {
 transform: translateY(-3px) scale(1.04);
 background: linear-gradient(135deg, #9a0000, #ff1f1f);
 border-color: rgba(255, 255, 255, 0.28);
 box-shadow:
 0 0 20px rgba(255, 0, 0, 0.48),
 0 0 40px rgba(255, 0, 0, 0.34),
 0 0 72px rgba(255, 0, 0, 0.22);
}

.lr-product-categories-section .button-learn {
 background: rgba(255, 255, 255, 0.04);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

.lr-product-categories-section .button-learn:hover {
 transform: translateY(-3px) scale(1.04);
 background: linear-gradient(135deg, #2a0a0a, #4a0f0f);
 border-color: rgba(255, 0, 0, 0.58);
 box-shadow:
 0 0 18px rgba(255, 0, 0, 0.34),
 0 0 34px rgba(255, 0, 0, 0.24),
 0 0 56px rgba(255, 0, 0, 0.16);
}

/* =========================================================
 NO RESULTS
 ========================================================= */

.lr-product-categories-section .no-results {
 border-radius: 18px;
 padding: 16px 18px;
 margin-top: 28px;
 background: rgba(80, 20, 20, 0.16);
 border: 1px solid rgba(255, 90, 90, 0.22);
 color: rgba(255, 255, 255, 0.84);
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 text-transform: none;
}

/* =========================================================
 RESPONSIVE
 ========================================================= */

@media (max-width: 1200px) {
 .lr-product-categories-section .category-hero-main {
 flex-direction: column;
 align-items: flex-start;
 }

 .lr-product-categories-section .product-categories {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 :root {
 --title-height: 112px;
 --image-height: 194px;
 --copy-height: 142px;
 --actions-height: 84px;
 }
}

@media (max-width: 768px) {
 .lr-product-categories-section .category-hero {
 padding: 60px 16px 56px;
 }

 .lr-product-categories-section .category-hero-main,
 .lr-product-categories-section .category-toolbar,
 .lr-product-categories-section .content {
 width: min(1400px, calc(100% - 32px));
 }

 .lr-product-categories-section .product-categories {
 gap: 18px;
 }

 .lr-product-categories-section .category-toolbar-main {
 display: block;
 }

 .lr-product-categories-section .category-toolbar-actions {
 justify-content: flex-start;
 margin-top: 14px;
 }

 .lr-product-categories-section .category-actions {
 flex-direction: column;
 }
}

@media (max-width: 640px) {
 .lr-product-categories-section .category-toolbar-actions {
 flex-direction: column;
 flex-wrap: wrap;
 }

 .lr-product-categories-section .category-sort-wrap,
 .lr-product-categories-section .button-clear-filters,
 .lr-product-categories-section .category-search-column,
 .lr-product-categories-section .category-search-wrap {
 width: 100%;
 min-width: 0;
 }

 .lr-product-categories-section .category-hero-actions {
 width: 100%;
 flex-direction: column;
 }

 .lr-product-categories-section .hero-button {
 width: 100%;
 }

 .lr-product-categories-section .product-categories {
 grid-template-columns: 1fr;
 }

 .lr-product-categories-section .category-link {
 grid-template-rows: auto 220px auto;
 }

 .lr-product-categories-section .category-title-bar,
 .lr-product-categories-section .category-copy,
 .lr-product-categories-section .category-actions {
 min-height: auto;
 height: auto;
 }

 .lr-product-categories-section .category-picture {
 height: 220px;
 min-height: 220px;
 }

 .lr-product-categories-section .product-category h2,
 .lr-product-categories-section .product-category p {
 display: block;
 overflow: visible;
 }

 .lr-product-categories-section .button-common {
 width: 100%;
 }
}