/**
 * Roadrunner Equipment - Inventory Page Styles
 * Pixel-perfect match to Figma design node 2114-4557
 * Converted from exact Figma Tailwind output
 */

/* ============================================
   Remove Unwanted Red Highlights
   ============================================ */
.inventory-main *,
.inventory-main *::before,
.inventory-main *::after {
    -webkit-tap-highlight-color: transparent !important;
}

.inventory-main a,
.inventory-main button,
.inventory-main input,
.inventory-main img {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

.inventory-main *:focus,
.inventory-main *:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================
   Font Face Declarations
   ============================================ */
@font-face {
    font-family: 'Riforma LL';
    src: url('/assets/fonts/RiformaLLWeb-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Riforma LL';
    src: url('/assets/fonts/RiformaLLWeb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Riforma LL';
    src: url('/assets/fonts/RiformaLLWeb-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Riforma LL';
    src: url('/assets/fonts/RiformaLLWeb-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro';
    src: url('/assets/fonts/SF-Pro-Display-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro';
    src: url('/assets/fonts/SF-Pro-Display-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro';
    src: url('/assets/fonts/SF-Pro-Display-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro';
    src: url('/assets/fonts/SF-Pro-Text-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Variables - Exact Figma Values
   ============================================ */
:root {
    /* Colors */
    --color-primary: #ff6442;
    --color-dark: #1a1a1a;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-section-bg: #f7f7f7;
    --color-border: #e3e3e3;
    --color-input-border: #c9cbcc;
    --color-text-secondary: #6f7071;
    --color-text-muted: #5c5c5c;
    --color-card-text: #f0f0f0;

    /* Fonts */
    --font-heading: 'Riforma LL', sans-serif;
    --font-body: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Dimensions */
    --sidebar-width: 307px;
    --card-width: 325px;
    --card-image-height: 275px;
    --radius-4: 4px;
    --radius-12: 12px;
    --radius-20: 20px;
    --radius-100: 100px;
}

/* ============================================
   Base Reset
   ============================================ */
.inventory-main * {
    box-sizing: border-box;
}

/* ============================================
   Main Container
   ============================================ */
.inventory-main {
    background-color: var(--color-white);
}

/* ============================================
   Page Header - Exact Figma Match
   ============================================ */
.page-header {
    padding: 40px 40px 24px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 1360px;
    max-width: 100%;
}

/* H1 - 52px Riforma LL Medium, tracking -1.56px, line-height 96% */
.page-title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -1.56px;
    color: var(--color-dark);
    margin: 0;
}

/* Subtitle - Exact Figma: Riforma LL 400, 24px, line-height 28px, letter-spacing -0.0215em */
.page-subtitle {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.0215em;
    color: #1A1A1A;
    margin: 0;
}

.page-subtitle::before {
    content: '→ ';
}

/* ============================================
   Inventory Container
   ============================================ */
.inventory-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 40px 40px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ============================================
   Toolbar - Exact Figma Match (Node 2114:4562)
   content-stretch flex items-center justify-between relative size-full
   ============================================ */
.inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
}

/* Listings Count - Exact Figma: Riforma LL 500, 32px, line-height 96%, letter-spacing -0.03em */
.listings-count {
    font-family: 'Riforma LL', var(--font-heading);
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 96%;
    letter-spacing: -0.03em;
    color: #1A1A1A;
    margin: 0;
    white-space: nowrap;
}

/* Toolbar Buttons Container - gap-[8px] */
.toolbar-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Toolbar Button - Exact Figma Match
   bg-white border border-[#e3e3e3] h-[48px] px-[24px] rounded-[100px]
   font-['SF_Pro:Medium'] text-[16px] text-black tracking-[-0.5px] */
.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-100);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--color-black);
    cursor: pointer;
    white-space: nowrap;
    line-height: 0;
}

.toolbar-btn:hover {
    background: #fafafa;
}

.toolbar-btn svg {
    flex-shrink: 0;
}

/* Quick Search Input - Pill Style */
.quick-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-100);
    cursor: text;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-search-wrapper:hover {
    border-color: #ccc;
}

.quick-search-wrapper:focus-within {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.quick-search-icon {
    flex-shrink: 0;
    color: var(--color-black);
}

.quick-search-input,
.quick-search-input[type="text"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.5px !important;
    color: var(--color-black) !important;
    width: 120px !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

.quick-search-input::placeholder {
    color: var(--color-black) !important;
    opacity: 1 !important;
}

.quick-search-input:focus,
.quick-search-input:active,
.quick-search-input:hover {
    outline: none !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Sort Dropdown */
.sort-dropdown-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
}

.sort-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 48px;
    padding: 0 40px 0 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-100);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--color-black);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sort-dropdown:hover {
    border-color: #ccc;
}

.sort-dropdown:focus {
    outline: none;
    border-color: #999;
}

.sort-dropdown-arrow {
    position: absolute;
    right: 16px;
    pointer-events: none;
    color: var(--color-black);
}

/* ============================================
   Inventory Layout - Sidebar + Grid
   ============================================ */
.inventory-layout {
    display: flex;
    gap: 40px;
}

/* ============================================
   Filter Sidebar - Exact Figma Match (Node 2114:4574)
   content-stretch flex flex-col gap-[16px] items-start w-[307px]
   ============================================ */
.filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: var(--sidebar-width);
    flex-shrink: 0;
}

/* ============================================
   Filter Section (Categories, Filters, Make)
   bg-[#f7f7f7] flex flex-col gap-[32px] p-[24px] rounded-[20px] w-full
   ============================================ */
.filter-section {
    background: #F7F7F7 !important;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 20px;
    width: 100%;
}

/* ============================================
   Section Header - Exact Figma Match
   font-['SF_Pro:Heavy'] text-[10px] text-black uppercase opacity-80
   line-height: 12px per Figma
   ============================================ */
.filter-section-header {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 860;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.8;
    line-height: 12px;
    white-space: nowrap;
}

/* ============================================
   Reset Filters Link
   ============================================ */
.reset-filters-link {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-decoration: underline;
    cursor: pointer;
}

.reset-filters-link:hover {
    color: var(--color-black);
}

/* ============================================
   Filter Items Container - Figma: gap-[24px]
   All items (including subitems) are in a flat list
   ============================================ */
.filter-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

/* ============================================
   Filter Item (expandable parent headers)
   Figma: label and icon inline, not space-between
   font-['SF_Pro:Medium'] text-[16px] text-black tracking-[-0.5px]
   ============================================ */
.filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.filter-item-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.5px;
    color: #000000;
    line-height: 19px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

/* Expand Icon - arrowdown.svg (inline next to label) */
.expand-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    background: url('/assets/images/icons/arrowdown.svg') center/contain no-repeat;
    transition: transform 0.2s ease;
}

.filter-item.expanded .expand-icon {
    transform: rotate(180deg);
}

/* ============================================
   Filter Subitems - Collapsed by default
   Figma: all items in flat gap-[24px] container
   ============================================ */
.filter-subitems {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.filter-subitems[data-parent] {
    display: none;
}

/* Show subitems when parent is expanded */
.filter-item.expanded + .filter-subitems {
    display: flex;
}

/* ============================================
   Filter Subitem (category children)
   Figma: pl-[8px] gap-[10px] font-['SF_Pro:Medium'] text-[16px] tracking-[-0.5px]
   ============================================ */
.filter-subitem {
    display: flex;
    align-items: center;
    padding-left: 8px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.5px;
    color: #000000;
    line-height: 19px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.filter-subitem input[type="checkbox"] {
    display: none;
}

/* Arrow icon - arrow.svg (per Figma Frame 56/57) */
.check-arrow {
    width: 15px;
    height: 13px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    background: url('/assets/images/icons/arrow.svg') center/contain no-repeat;
    transform: translateZ(0);
}

/* Tag/Label icon - label.svg (per Figma) */
.circle-bullet {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    background: url('/assets/images/icons/label.svg') center/contain no-repeat;
    transform: translateZ(0);
}

.filter-subitem-text {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    line-height: 19px;
    transition: color 0.15s ease;
    will-change: color;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* Selected state indicator - color only, no weight change to prevent underline shift */
/* Categories */
.filter-subitem input[type="checkbox"]:checked ~ .filter-subitem-text,
/* Capacity */
.filter-link-item input[type="checkbox"]:checked ~ .filter-link-text,
/* Make */
.filter-make-item input[type="checkbox"]:checked ~ .filter-make-text {
    color: var(--color-primary, #ff6442);
}

/* Power Type and Condition - label comes before checkbox, use :has() */
.filter-checkbox-item:has(input[type="checkbox"]:checked) .checkbox-label {
    color: var(--color-primary, #ff6442);
}

/* ============================================
   Filter Link Item (capacity options like "0-5k lbs")
   Figma: gap-[6px] h-[11px] pl-[8px] font-['SF_Pro:Medium'] text-[16px] tracking-[-0.5px]
   ============================================ */
.filter-link-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.5px;
    color: #000000;
    line-height: 19px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.filter-link-item input[type="checkbox"] {
    display: none;
}

.filter-link-text {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    line-height: 19px;
    transition: color 0.15s ease;
    will-change: color;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* ============================================
   Filter Range Row
   Figma: gap-[6px] h-[22px] pb-[8px] pl-[8px] w-full
   ============================================ */
.filter-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding-left: 8px;
    width: 100%;
}

.range-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #C9CBCC;
    border-radius: 4px;
    padding: 0 8px;
    justify-content: space-between;
}

/* Range Input - Exact Figma Match
   Input should be invisible inside wrapper - no borders, no background
   font-['SF_Pro:Semibold'] text-[12px] tracking-[-0.35px] text-[#6f7071] */
.range-input,
.range-input[type="text"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 1;
    min-width: 0;
    height: 100%;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 590 !important;
    letter-spacing: -0.35px !important;
    color: #6F7071 !important;
    line-height: 14px !important;
    border-radius: 0 !important;
}

.range-input:focus,
.range-input:active,
.range-input:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.range-input::placeholder {
    color: #6F7071 !important;
    opacity: 1 !important;
}

.range-unit {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 590;
    letter-spacing: -0.35px;
    color: #000000;
    white-space: nowrap;
    line-height: 14px;
}

.range-separator {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.5px;
    color: #000000;
    line-height: 19px;
    flex-shrink: 0;
}

/* ============================================
   Filter Checkbox Item (Power Type, Condition)
   Figma: gap-[10px] h-[11px] pl-[8px] font-['SF_Pro:Medium'] text-[16px] tracking-[-0.35px]
   ============================================ */
.filter-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.35px;
    color: #000000;
    line-height: 19px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.filter-checkbox-item input[type="checkbox"] {
    display: none;
}

.checkbox-label {
    flex: 1;
    line-height: 19px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Checkbox Box - size-[20px] border border-[#c9cbcc] rounded-[4px] */
.checkbox-box {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #C9CBCC;
    border-radius: 4px;
    flex-shrink: 0;
    background: #FFFFFF;
}

.filter-checkbox-item input[type="checkbox"]:checked + .checkbox-box,
.filter-checkbox-item input[type="checkbox"]:checked ~ .checkbox-box {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ============================================
   Filter Make Item
   Figma: font-['SF_Pro:Medium'] text-[16px] tracking-[-0.5px]
   Items display circle bullet then underlined text
   ============================================ */
.filter-make-item {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.5px;
    color: #000000;
    line-height: 19px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.filter-make-item input[type="checkbox"] {
    display: none;
}

.filter-make-text {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    line-height: 19px;
    transition: color 0.15s ease;
    will-change: color;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* ============================================
   Description Box
   Figma: bg-white border border-[#e3e3e3] p-[24px] rounded-[20px] w-full
   font-['SF_Pro:Medium'] text-[16px] text-[#5c5c5c] tracking-[-0.35px]
   ============================================ */
.filter-description {
    background: #FFFFFF !important;
    border: 1px solid #E3E3E3;
    padding: 24px;
    border-radius: 20px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.35px;
    color: #5C5C5C;
    line-height: 19px;
}

.filter-description p {
    margin: 0 0 19px 0;
}

.filter-description p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Products Area
   ============================================ */
.products-area {
    flex: 1;
    min-width: 0;
}

/* ============================================
   Product Grid - 3-column, gap-16px
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--card-width));
    gap: 16px;
}

/* ============================================
   Product Card - Exact Figma Match
   bg-black border border-[rgba(0,0,0,0.2)] rounded-[20px] w-[325px] overflow-clip
   ============================================ */
.product-card {
    width: var(--card-width);
    background: var(--color-black);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-20);
    overflow: hidden;
    position: relative;
}

/* ============================================
   Card Gallery - h-[275px]
   ============================================ */
.card-gallery {
    width: 100%;
    height: var(--card-image-height);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* border-radius handled by parent card overflow:hidden */
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-image.active {
    opacity: 1;
    pointer-events: auto;
}

.card-no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: var(--color-card-text);
    font-family: var(--font-body);
    font-size: 14px;
}

/* Image Overlay Gradient */
.card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 73.359%, rgba(0, 0, 0, 0.5) 94.402%),
                linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%);
    pointer-events: none;
}

/* Image Dots - gap-[10px] h-[33px] */
.card-dots {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    height: 33px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.card-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.card-dots .dot.active {
    background: var(--color-white);
}

/* Carousel Navigation Arrows - Figma Match (Node 2119:10629)
   44x44px white circle with #E3E3E3 border, chevron icon centered */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 100px;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    box-sizing: border-box;
}

.carousel-arrow-left {
    left: 8px;
}

.carousel-arrow-right {
    right: 8px;
}

/* Chevron icon - 6px wide, 12px tall, 2px black stroke */
.carousel-arrow svg {
    display: block;
    width: 6px;
    height: 12px;
    stroke: #000000;
    stroke-width: 2;
    fill: none;
}

/* Hover state - subtle background change */
.carousel-arrow:hover {
    background: #FAFAFA;
    border-color: #D0D0D0;
}

.carousel-arrow:focus {
    outline: none;
    border-color: #CCCCCC;
}

.carousel-arrow:active {
    background: #F5F5F5;
}

/* Click Area for Modal Trigger */
.card-click-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

/* ============================================
   Card Content - p-[24px] gap-[16px]
   ============================================ */
.card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Title Block - gap-[8px] per Figma */
.card-title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category - font-['SF_Pro:Heavy'] text-[10px] text-[#f0f0f0] uppercase */
.card-category {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 860;
    text-transform: uppercase;
    color: var(--color-card-text);
    line-height: normal;
}

/* Title - font-['SF_Pro:Semibold'] text-[16px] text-[#f0f0f0] tracking-[-0.85px] */
.card-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.85px;
    color: var(--color-card-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

/* Price - font-['Riforma_LL:Regular'] text-[24px] text-[#f0f0f0] tracking-[-0.516px] leading-[28px] */
.card-price {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.516px;
    line-height: 28px;
    color: var(--color-card-text);
}

/* ============================================
   Card CTAs Section
   ============================================ */
.card-ctas {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Hours Row - border border-[rgba(255,255,255,0.24)] h-[44px] p-[16px] rounded-[12px] */
.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-12);
}

/* Hours Label - font-['SF_Pro:Semibold'] text-[12px] text-white tracking-[-0.35px] opacity-80 */
.hours-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.35px;
    color: var(--color-white);
    opacity: 0.8;
    line-height: normal;
}

/* Hours Value - font-['SF_Pro:Bold'] text-[12px] text-white tracking-[-0.35px] opacity-80 */
.hours-value {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.35px;
    color: var(--color-white);
    opacity: 0.8;
    line-height: normal;
}

/* ============================================
   Card Actions
   ============================================ */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Email Seller Button - bg-[#ff6442] h-[44px] px-[24px] rounded-[12px]
   font-['SF_Pro:Medium'] text-[16px] text-[#f0f0f0] tracking-[-0.5px] */
.email-seller-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    padding: 0 24px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-12);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--color-card-text);
    cursor: pointer;
    width: 100%;
    line-height: normal;
}

.email-seller-btn:hover {
    background: #e55a3a;
}

.email-seller-btn svg {
    flex-shrink: 0;
}

/* Card Link Action - font-['SF_Pro:Semibold'] text-[12px] text-[#f0f0f0] tracking-[-0.35px] opacity-80 */
.card-link-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 24px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.35px;
    color: var(--color-card-text);
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
    line-height: normal;
}

.card-link-action:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.card-link-action svg {
    flex-shrink: 0;
}

/* ============================================
   Pagination - Exact Figma Match (Node 2114:5240)
   ============================================ */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 32px 0px;
    gap: 8px;
    width: 100%;
    height: 112px;
}

/* Pagination Button - Exact Figma Match
   CTA buttons: height 48px, padding 0 24px, gap 6px
   font-family: SF Pro, font-weight: 590, font-size: 16px
   line-height: normal, letter-spacing: -0.5px, color: #FF6442 */
.pagination-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 6px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 100px;
    cursor: pointer;
    flex: none;
    flex-grow: 0;
}

.pagination-btn span {
    font-family: 'SF Pro', var(--font-body);
    font-style: normal;
    font-weight: 590;
    font-size: 16px;
    line-height: normal;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FF6442;
    white-space: nowrap;
}

.pagination-btn:hover {
    background: #FAFAFA !important;
    border-color: #cccccc;
}

.pagination-btn:hover span {
    color: #FF6442 !important;
}

.pagination-btn:focus,
.pagination-btn:active {
    background: #F5F5F5 !important;
    outline: none;
}

.pagination-btn:focus span,
.pagination-btn:active span {
    color: #FF6442 !important;
}

/* ============================================
   No Results
   ============================================ */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ============================================
   Mobile Filter Toggle
   ============================================ */
.mobile-filter-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 48px;
    padding: 0 24px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-100);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    align-items: center;
    gap: 8px;
}

/* ============================================
   Modal Styles
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--color-white);
    border-radius: var(--radius-20);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.modal-logo img {
    height: 32px;
    width: auto;
}

.modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
}

.modal-close:hover {
    background: #f5f5f5;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

.modal-tab {
    flex: 1;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.modal-tab.active {
    color: var(--color-dark);
    border-bottom-color: var(--color-primary);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Specs Sections */
.specs-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.specs-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    overflow: hidden;
}

.specs-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--color-section-bg);
    cursor: pointer;
}

.specs-section-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.specs-section-content {
    padding: 16px;
}

.specs-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.specs-row:last-child {
    border-bottom: none;
}

.specs-label {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.specs-value {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
}

/* Condition Report */
.condition-header {
    margin-bottom: 24px;
}

.condition-header h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-dark);
    margin: 0 0 8px 0;
}

.condition-note {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.condition-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================
   Mobile Category Filter Pills (Figma Node 2114:7413)
   Horizontal scrollable category pills for mobile
   ============================================ */
.mobile-category-pills {
    display: none;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.mobile-category-pills::-webkit-scrollbar {
    display: none;
}

.mobile-category-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.35px;
    color: var(--color-black);
    opacity: 0.8;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-category-pill .pill-icon {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.mobile-category-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Mobile Toolbar Icon Buttons (Figma Node 2114:7416) */
.mobile-toolbar-icons {
    display: none;
    gap: 4px;
    align-items: center;
}

.mobile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-dark);
}

.mobile-icon-btn:hover {
    background: #fafafa;
    border-color: #ccc;
}

/* Mobile Description Box (shows after pagination on mobile) */
.mobile-description-box {
    display: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 24px;
    border-radius: 20px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 510;
    letter-spacing: -0.35px;
    color: #5C5C5C;
    line-height: 19px;
    margin-top: 24px;
}

.mobile-description-box p {
    margin: 0 0 19px 0;
}

.mobile-description-box p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(2, var(--card-width));
    }
}

@media (max-width: 1024px) {
    .filter-sidebar {
        display: none;
    }

    .filter-sidebar.active {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 360px;
        height: 100%;
        background: var(--color-white);
        z-index: 200;
        overflow-y: auto;
        padding: 20px;
    }

    .mobile-filter-toggle {
        display: flex;
    }

    .inventory-container {
        padding: 0 20px 20px;
    }

    .page-header {
        padding: 20px;
    }

    .page-title {
        font-size: 32px;
    }

    .page-subtitle {
        font-size: 18px;
    }

    .inventory-toolbar {
        flex-direction: column;
        height: auto;
        gap: 16px;
        align-items: flex-start;
    }

    .toolbar-buttons {
        flex-wrap: wrap;
    }
}

/* ============================================
   Mobile Styles (768px and below) - Figma Match
   ============================================ */
@media (max-width: 768px) {
    /* Page Header - Mobile */
    .page-header {
        padding: 0 24px 32px;
    }

    .page-header-content {
        gap: 16px;
        width: 100%;
    }

    .page-title {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 500;
        line-height: 0.96;
        letter-spacing: -0.96px;
    }

    .page-subtitle {
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.85px;
        line-height: normal;
    }

    /* Inventory Container - Mobile */
    .inventory-container {
        padding: 0 24px 32px;
        gap: 8px;
    }

    /* Toolbar - Mobile Layout (Figma Node 2114:7414) */
    .inventory-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: auto;
        gap: 0;
        width: 100%;
    }

    .listings-count {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.136px;
        line-height: normal;
    }

    /* Hide desktop toolbar buttons on mobile */
    .toolbar-buttons {
        display: none;
    }

    /* Show mobile icon buttons */
    .mobile-toolbar-icons {
        display: flex;
    }

    /* Show mobile category pills */
    .mobile-category-pills {
        display: flex;
        width: 100%;
        margin-top: 8px;
    }

    /* Product Grid - Mobile */
    .product-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0;
    }

    .product-card {
        width: 100%;
    }

    /* Card Gallery - Mobile */
    .card-gallery {
        height: 275px;
    }

    /* Card Content - Mobile (Figma Node 2116:5946) */
    .card-content {
        padding: 24px;
        gap: 16px;
    }

    /* Hours Row - Mobile */
    .hours-row {
        margin-bottom: 8px;
    }

    /* Card CTAs - Mobile Layout */
    .card-ctas {
        gap: 8px;
    }

    .card-actions {
        gap: 16px;
    }

    /* Phone and shipping links on mobile */
    .card-link-action {
        padding: 0;
    }

    /* Pagination - Mobile (Figma Node 2114:7587)
       Three buttons in a row with gap-[8px] */
    .pagination {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0;
        height: auto;
        margin-top: 24px;
    }

    .pagination-btn {
        flex: 1;
        min-width: 0;
        padding: 0 16px;
        height: 48px;
    }

    .pagination-btn span {
        font-size: 12px;
        letter-spacing: -0.35px;
    }

    /* Show mobile description box */
    .mobile-description-box {
        display: block;
    }

    /* Hide desktop filter description on mobile */
    .filter-description {
        display: none;
    }

    /* Hide mobile filter toggle FAB when using pills */
    .mobile-filter-toggle {
        display: none;
    }

    /* Inventory layout - single column on mobile */
    .inventory-layout {
        flex-direction: column;
        gap: 0;
    }
}

/* ============================================
   Small Mobile Styles (480px and below)
   ============================================ */
@media (max-width: 480px) {
    .page-header {
        padding: 0 24px 24px;
    }

    .page-title {
        font-size: 28px;
    }

    .inventory-container {
        padding: 0 24px 24px;
    }

    /* Pagination buttons stack on very small screens */
    .pagination {
        flex-wrap: wrap;
    }

    .pagination-btn {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 100px;
    }
}