/* * Tink's Category / Product Listing Preview * Version 0.1.2 */ html.tinks-category-preview-v012 { --tkc-bg: #f4f5f6; --tkc-surface: #fff; --tkc-ink: #1f2328; --tkc-muted: #68717d; --tkc-line: #e0e4e8; --tkc-line-strong: #d0d5db; --tkc-red: #d71920; --tkc-red-dark: #b9151b; --tkc-orange: #f36f21; --tkc-radius: 14px; --tkc-pad: clamp(22px, 4vw, 64px); --tkc-shadow: 0 1px 2px rgba(16,24,40,.035), 0 8px 24px rgba(16,24,40,.045); } html.tinks-category-preview-v012 #content.tkc012-content { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--tkc-bg) !important; } /* Breadcrumb */ html.tinks-category-preview-v012 .tkc012-breadcrumb-row, html.tinks-category-preview-v012 .tkc012-breadcrumb-row > .row, html.tinks-category-preview-v012 .tkc012-breadcrumb-row > .row > .col_SC7CM, html.tinks-category-preview-v012 .tkc012-breadcrumb-row .col-sticky, html.tinks-category-preview-v012 .tkc012-breadcrumb-system { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb { display: flex !important; align-items: center !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 var(--tkc-pad) !important; border: 0 !important; border-bottom: 1px solid var(--tkc-line) !important; border-radius: 0 !important; background: #fff !important; overflow-x: auto !important; white-space: nowrap !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li { display: inline-flex !important; align-items: center !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li::before, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li::after { content: none !important; display: none !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li + li::before { content: "/" !important; display: inline-block !important; padding: 0 10px !important; color: #b0b5bb !important; font-size: 12px !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb a { display: inline-flex !important; align-items: center !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--tkc-muted) !important; font-size: 12.5px !important; font-weight: 550 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li:last-child a { color: var(--tkc-ink) !important; font-weight: 700 !important; } /* Category head */ html.tinks-category-preview-v012 .tkc012-category-head { width: 100% !important; margin: 0 !important; padding: 26px var(--tkc-pad) 22px !important; background: var(--tkc-bg) !important; } html.tinks-category-preview-v012 .tkc012-title-row { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 20px !important; margin-bottom: 15px !important; } html.tinks-category-preview-v012 .tkc012-title { margin: 0 !important; color: var(--tkc-ink) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: clamp(27px, 2.2vw, 38px) !important; font-weight: 780 !important; line-height: 1.05 !important; letter-spacing: -.035em !important; } html.tinks-category-preview-v012 .tkc012-count { color: var(--tkc-muted) !important; font-size: 13px !important; font-weight: 600 !important; } html.tinks-category-preview-v012 .tkc012-explore-label { margin: 0 0 8px !important; color: #8a919a !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } html.tinks-category-preview-v012 .tkc012-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } html.tinks-category-preview-v012 .tkc012-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; min-height: 38px !important; margin: 0 !important; padding: 8px 13px !important; border: 1px solid var(--tkc-line) !important; border-radius: 999px !important; background: #fff !important; color: #3e454e !important; font-size: 12.5px !important; font-weight: 650 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc012-chip span { color: #90969e !important; font-size: 11px !important; } /* Toolbar now belongs BELOW the category head */ html.tinks-category-preview-v012 .tkc012-toolbar { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; padding: 10px var(--tkc-pad) !important; border-top: 1px solid var(--tkc-line) !important; border-bottom: 1px solid var(--tkc-line) !important; background: #fff !important; } html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display, html.tinks-category-preview-v012 .tkc012-product-filter .limit, html.tinks-category-preview-v012 .tkc012-product-filter .sort { display: flex !important; align-items: center !important; gap: 6px !important; float: none !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 38px !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid var(--tkc-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: #49515b !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a.tkc012-active-view { border-color: #bfc5cb !important; background: #eef0f2 !important; color: #20252b !important; } html.tinks-category-preview-v012 .tkc012-product-filter b { color: #4d555e !important; font-size: 12px !important; font-weight: 650 !important; } html.tinks-category-preview-v012 .tkc012-product-filter select { min-width: 140px !important; height: 38px !important; margin: 0 !important; padding: 0 34px 0 10px !important; border: 1px solid var(--tkc-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: #3e454e !important; box-shadow: none !important; font-size: 12.5px !important; } /* Remove old duplicate/sidebar layout */ html.tinks-category-preview-v012 .tkc012-old-title { display: none !important; } html.tinks-category-preview-v012 .tkc012-old-sidebar { display: none !important; } html.tinks-category-preview-v012 .tkc012-products-row, html.tinks-category-preview-v012 .tkc012-products-row > .row, html.tinks-category-preview-v012 .tkc012-product-column { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc022-product-system > .tb_listing_options:empty { display: none !important; } /* Product canvas */ html.tinks-category-preview-v012 .tkc012-products.tkc012-products { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 20px var(--tkc-pad) 46px !important; background: var(--tkc-bg) !important; } html.tinks-category-preview-v012 .tkc012-products > .tkc012-product-cell { min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } html.tinks-category-preview-v012 .tkc012-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 14px !important; border: 1px solid var(--tkc-line) !important; border-radius: var(--tkc-radius) !important; background: #fff !important; box-shadow: var(--tkc-shadow) !important; overflow: hidden !important; } html.tinks-category-preview-v012 .tkc012-image { display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% + 28px) !important; height: 230px !important; margin: -14px -14px 12px !important; padding: 14px !important; background: #fff !important; } html.tinks-category-preview-v012 .tkc012-image > a, html.tinks-category-preview-v012 .tkc012-image > a > span, html.tinks-category-preview-v012 .tkc012-image > a > span > span { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 100% !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-image img { position: static !important; display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; margin: 0 !important; object-fit: contain !important; } html.tinks-category-preview-v012 .tkc012-name { min-height: 55px !important; margin: 0 0 8px !important; color: var(--tkc-ink) !important; font-size: 14px !important; font-weight: 750 !important; line-height: 1.3 !important; } html.tinks-category-preview-v012 .tkc012-name a { color: inherit !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc012-description { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; max-height: 74px !important; margin: 0 0 12px !important; overflow: hidden !important; color: #5f6873 !important; font-size: 12.5px !important; line-height: 1.48 !important; } html.tinks-category-preview-v012 .tkc012-sale-badge { top: 10px !important; left: 10px !important; padding: 5px 7px !important; border-radius: 7px !important; background: var(--tkc-orange) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; } /* Hide old card price/button placement after we've moved those nodes. */ html.tinks-category-preview-v012 .tkc012-legacy-separator, html.tinks-category-preview-v012 .tkc012-legacy-price-row { display: none !important; } /* New card footer */ html.tinks-category-preview-v012 .tkc012-card-footer { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid #eceef0 !important; } html.tinks-category-preview-v012 .tkc012-price-row { display: flex !important; justify-content: flex-end !important; min-height: 26px !important; } html.tinks-category-preview-v012 .tkc012-price { margin: 0 !important; color: var(--tkc-ink) !important; font-size: 18px !important; font-weight: 760 !important; line-height: 1.15 !important; text-align: right !important; } html.tinks-category-preview-v012 .tkc012-price .price-old { margin-right: 7px !important; color: #9a9fa6 !important; font-size: 11px !important; font-weight: 500 !important; } html.tinks-category-preview-v012 .tkc012-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; min-height: 40px !important; border: 1px solid var(--tkc-line-strong) !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; } html.tinks-category-preview-v012 .tkc012-action-wrap { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-action { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 40px !important; height: 100% !important; margin: 0 !important; padding: 8px 9px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 11.5px !important; font-weight: 750 !important; line-height: 1 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc012-details { background: #fff !important; color: #404851 !important; } html.tinks-category-preview-v012 .tkc012-details:hover { background: #f2f4f5 !important; } html.tinks-category-preview-v012 .tkc012-buy-wrap { border-left: 1px solid rgba(0,0,0,.08) !important; } html.tinks-category-preview-v012 .tkc012-primary { background: var(--tkc-red) !important; color: #fff !important; } html.tinks-category-preview-v012 .tkc012-primary:hover { background: var(--tkc-red-dark) !important; color: #fff !important; } html.tinks-category-preview-v012 .tkc012-primary span { color: #fff !important; } /* If a product has only one action, let it span full width. */ html.tinks-category-preview-v012 .tkc012-actions > :only-child { grid-column: 1 / -1 !important; border-left: 0 !important; } /* OUR grid/list modes */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 16px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid > .tkc012-product-cell { display: block !important; float: none !important; clear: none !important; width: auto !important; max-width: none !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid .tkc012-card { min-height: 540px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid .caption { flex: 1 1 auto !important; } /* List */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list { display: flex !important; flex-direction: column !important; gap: 16px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list > .tkc012-product-cell { display: block !important; float: none !important; clear: none !important; width: 100% !important; max-width: none !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { display: grid !important; grid-template-columns: 210px minmax(0,1fr) minmax(210px,260px) !important; grid-template-rows: auto 1fr auto !important; gap: 0 24px !important; min-height: 235px !important; padding: 18px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card > div:not(.tkc012-image):not(.tkc012-card-footer) { display: contents !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .caption { display: contents !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { grid-column: 1 !important; grid-row: 1 / span 3 !important; width: 210px !important; height: 198px !important; margin: 0 !important; padding: 8px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-name { grid-column: 2 !important; grid-row: 1 !important; min-height: 0 !important; margin: 4px 0 8px !important; font-size: 15px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-description { grid-column: 2 !important; grid-row: 2 !important; -webkit-line-clamp: 5 !important; max-height: 94px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card-footer { grid-column: 3 !important; grid-row: 1 / span 3 !important; align-self: stretch !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; border-top: 0 !important; } /* Pagination */ html.tinks-category-preview-v012 .tkc022-product-system .pagination { margin: 0 !important; padding: 0 var(--tkc-pad) 40px !important; border: 0 !important; background: var(--tkc-bg) !important; } /* Responsive */ @media (max-width: 1500px) { html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 1180px) { html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { html.tinks-category-preview-v012 { --tkc-pad: 14px; } html.tinks-category-preview-v012 .tkc012-title-row { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; } html.tinks-category-preview-v012 .tkc012-toolbar { justify-content: stretch !important; padding-top: 9px !important; padding-bottom: 9px !important; overflow-x: auto !important; } html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { display: grid !important; grid-template-columns: auto 1fr 1fr !important; gap: 8px !important; width: 100% !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display { display: flex !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit, html.tinks-category-preview-v012 .tkc012-product-filter .sort { min-width: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter select { min-width: 0 !important; width: 100% !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid .tkc012-card { min-height: 500px !important; padding: 11px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid .tkc012-image { width: calc(100% + 22px) !important; height: 180px !important; margin: -11px -11px 10px !important; padding: 10px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-grid .tkc012-name { min-height: 0 !important; font-size: 13px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { grid-template-columns: 115px minmax(0,1fr) !important; grid-template-rows: auto auto auto !important; column-gap: 12px !important; min-height: 190px !important; padding: 12px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 115px !important; height: 135px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-name { grid-column: 2 !important; grid-row: 1 !important; font-size: 13.5px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-description { grid-column: 2 !important; grid-row: 2 !important; -webkit-line-clamp: 3 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card-footer { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 10px !important; } } @media (max-width: 520px) { html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { grid-template-columns: 88px 1fr 1fr !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { width: 42px !important; padding: 0 !important; font-size: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a i { font-size: 14px !important; } } /* ========================================================================== V0.1.3 polish ========================================================================== */ /* -------------------------------------------------------------------------- Breadcrumb: completely neutralise legacy BurnEngine wedge/tab styling -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc012-breadcrumb-system, html.tinks-category-preview-v012 .tkc012-breadcrumb-system *, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li > a { background-image: none !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb { gap: 0 !important; min-height: 48px !important; padding-left: var(--tkc-pad) !important; padding-right: var(--tkc-pad) !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li { position: relative !important; min-height: 48px !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li > a { position: relative !important; min-height: 48px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; transform: none !important; box-shadow: none !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li::before, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li::after, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li > a::before, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li > a::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; transform: none !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li + li { margin-left: 12px !important; padding-left: 18px !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li + li::before { content: "" !important; display: block !important; position: absolute !important; left: 1px !important; top: 50% !important; width: 7px !important; height: 7px !important; border: 0 !important; border-right: 1.5px solid #adb3ba !important; border-bottom: 1.5px solid #adb3ba !important; background: transparent !important; transform: translateY(-50%) rotate(-45deg) !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li:first-child a { width: 30px !important; justify-content: flex-start !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li:first-child i { color: #8a929b !important; font-size: 13px !important; } /* -------------------------------------------------------------------------- Discount badge: fixed geometry + vertically centered percentage text -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc012-sale-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 24px !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 7px !important; background: var(--tkc-orange) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; vertical-align: middle !important; box-sizing: border-box !important; } /* If BurnEngine wraps the badge text in a span, centre that too. */ html.tinks-category-preview-v012 .tkc012-sale-badge > span { display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; line-height: 1 !important; } /* Small mobile adjustment so breadcrumb doesn't waste horizontal space. */ @media (max-width: 900px) { html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb { min-height: 44px !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li, html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li > a { min-height: 44px !important; } html.tinks-category-preview-v012 .breadcrumb.tkc012-breadcrumb > li + li { margin-left: 8px !important; padding-left: 15px !important; } } /* ========================================================================== V0.1.4 — breadcrumb moved into site shell ========================================================================== */ html.tinks-category-preview-v012 .tkc014-breadcrumb-shell { position: relative !important; z-index: 40 !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--tkc-line) !important; background: #fff !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .tkc012-breadcrumb-system { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb.tkc012-breadcrumb { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; min-height: 44px !important; margin: 0 !important; padding: 0 var(--tkc-pad) !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; } /* Remove every last bit of legacy arrow-tab geometry. */ html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; float: none !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; clip-path: none !important; transform: none !important; box-shadow: none !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li::before, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li::after, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li > a::before, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li > a::after { content: none !important; display: none !important; border: 0 !important; background: none !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li + li { margin-left: 13px !important; padding-left: 18px !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li + li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; display: block !important; width: 6px !important; height: 6px !important; border: 0 !important; border-right: 1.5px solid #b0b6bd !important; border-bottom: 1.5px solid #b0b6bd !important; background: transparent !important; transform: translateY(-50%) rotate(-45deg) !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb a { color: #6e7681 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li:last-child a { color: #262b31 !important; font-weight: 750 !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li:first-child a { width: 24px !important; justify-content: flex-start !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li:first-child i { color: #9299a1 !important; font-size: 12px !important; } /* Old container is now redundant after relocation. */ html.tinks-category-preview-v012 .tkc014-old-breadcrumb-row { display: none !important; } /* * Since the breadcrumb now belongs to the header shell, remove the visual * gap that previously separated it from the category header. */ html.tinks-category-preview-v012 .tkc012-category-head { padding-top: 24px !important; } @media (max-width: 900px) { html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb.tkc012-breadcrumb { min-height: 42px !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li > a { min-height: 42px !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb > li + li { margin-left: 9px !important; padding-left: 15px !important; } html.tinks-category-preview-v012 .tkc014-breadcrumb-shell .breadcrumb a { font-size: 11.5px !important; } } /* ========================================================================== V0.1.5 — replace breadcrumb with Navigate menu ========================================================================== */ /* Breadcrumb is retained only as a hidden data source for hierarchy links. */ html.tinks-category-preview-v012 .tkc015-breadcrumb-source, html.tinks-category-preview-v012 .tkc015-breadcrumb-row-hidden, html.tinks-category-preview-v012 .tkc015-breadcrumb-shell-hidden, html.tinks-category-preview-v012 .tkc014-breadcrumb-shell { display: none !important; } /* Title row becomes: Navigate button | Title ................ Product count */ html.tinks-category-preview-v012 .tkc012-title-row { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; justify-content: stretch !important; column-gap: 12px !important; row-gap: 6px !important; } /* Existing title/count now occupy explicit grid cells. */ html.tinks-category-preview-v012 .tkc012-title { grid-column: 2 !important; min-width: 0 !important; } html.tinks-category-preview-v012 .tkc012-count { grid-column: 3 !important; justify-self: end !important; white-space: nowrap !important; } /* -------------------------------------------------------------------------- Navigate trigger -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc015-navigate-wrap { position: relative !important; z-index: 60 !important; grid-column: 1 !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc015-navigate-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 40px !important; margin: 0 !important; padding: 0 13px !important; border: 1px solid var(--tkc-line-strong) !important; border-radius: 10px !important; background: #fff !important; color: #404750 !important; box-shadow: 0 1px 2px rgba(16,24,40,.035) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important; } html.tinks-category-preview-v012 .tkc015-navigate-button:hover, html.tinks-category-preview-v012 .tkc015-navigate-wrap.is-open .tkc015-navigate-button { border-color: #c1c7cd !important; background: #f8f9fa !important; color: var(--tkc-ink) !important; } html.tinks-category-preview-v012 .tkc015-navigate-button:focus-visible { outline: 3px solid rgba(215,25,32,.12) !important; outline-offset: 2px !important; } /* Small hierarchy icon: three short staggered lines. */ html.tinks-category-preview-v012 .tkc015-nav-icon { position: relative !important; display: inline-block !important; width: 15px !important; height: 14px !important; border-left: 2px solid #7d858e !important; } html.tinks-category-preview-v012 .tkc015-nav-icon::before, html.tinks-category-preview-v012 .tkc015-nav-icon::after { content: "" !important; position: absolute !important; left: 3px !important; display: block !important; width: 8px !important; border-top: 2px solid #7d858e !important; } html.tinks-category-preview-v012 .tkc015-nav-icon::before { top: 3px !important; } html.tinks-category-preview-v012 .tkc015-nav-icon::after { top: 9px !important; } html.tinks-category-preview-v012 .tkc015-nav-caret { display: inline-block !important; width: 6px !important; height: 6px !important; margin: -3px 0 0 2px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) !important; transition: transform 150ms ease !important; } html.tinks-category-preview-v012 .tkc015-navigate-wrap.is-open .tkc015-nav-caret { margin-top: 3px !important; transform: rotate(225deg) !important; } /* -------------------------------------------------------------------------- Navigate popup -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc015-navigate-menu { position: absolute !important; left: 0 !important; top: calc(100% + 8px) !important; z-index: 100 !important; width: max-content !important; min-width: 260px !important; max-width: min(390px, calc(100vw - 28px)) !important; margin: 0 !important; padding: 7px !important; border: 1px solid var(--tkc-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 12px 30px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06) !important; } html.tinks-category-preview-v012 .tkc015-navigate-menu[hidden] { display: none !important; } html.tinks-category-preview-v012 .tkc015-nav-item { position: relative !important; display: flex !important; align-items: center !important; min-height: 42px !important; margin: 0 !important; padding: 9px 12px 9px 32px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #464e58 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 620 !important; line-height: 1.25 !important; text-decoration: none !important; } /* Vertical tree line. */ html.tinks-category-preview-v012 .tkc015-nav-item::before { content: "" !important; position: absolute !important; left: 15px !important; top: 0 !important; bottom: 0 !important; width: 1px !important; background: #dfe3e7 !important; } html.tinks-category-preview-v012 .tkc015-nav-item::after { content: "" !important; position: absolute !important; left: 12px !important; top: 50% !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #b8bec5 !important; transform: translateY(-50%) !important; } html.tinks-category-preview-v012 a.tkc015-nav-item:hover { background: #f3f5f6 !important; color: var(--tkc-ink) !important; } html.tinks-category-preview-v012 .tkc015-nav-item.tkc015-current { background: #f6f7f8 !important; color: var(--tkc-ink) !important; font-weight: 750 !important; cursor: default !important; } html.tinks-category-preview-v012 .tkc015-nav-item.tkc015-current::after { width: 9px !important; height: 9px !important; left: 11px !important; background: var(--tkc-red) !important; } /* With the breadcrumb gone the category header can sit a little higher. */ html.tinks-category-preview-v012 .tkc012-category-head { padding-top: 25px !important; } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media (max-width: 900px) { html.tinks-category-preview-v012 .tkc012-title-row { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; } html.tinks-category-preview-v012 .tkc012-title { grid-column: 2 !important; font-size: clamp(25px, 7vw, 34px) !important; } html.tinks-category-preview-v012 .tkc012-count { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: start !important; margin-left: 0 !important; } html.tinks-category-preview-v012 .tkc015-navigate-button { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; } /* Icon-only Navigate button on mobile; aria-label still describes it. */ html.tinks-category-preview-v012 .tkc015-navigate-button > span:nth-child(2), html.tinks-category-preview-v012 .tkc015-nav-caret { display: none !important; } html.tinks-category-preview-v012 .tkc015-navigate-menu { min-width: min(310px, calc(100vw - 28px)) !important; } } /* ========================================================================== V0.1.6 — category header placement fix ========================================================================== */ /* * The category header and product toolbar are now direct children of #content. * Explicitly protect them from any legacy row visibility/layout rules. */ html.tinks-category-preview-v012 #content > .tkc012-category-head, html.tinks-category-preview-v012 #content > .tkc012-toolbar { display: block !important; visibility: visible !important; opacity: 1 !important; } html.tinks-category-preview-v012 #content > .tkc012-toolbar { display: flex !important; } /* * Hide ONLY the original breadcrumb source/legacy row. * Do not let this rule affect modern siblings. */ html.tinks-category-preview-v012 .tkc015-breadcrumb-row-hidden { display: none !important; } html.tinks-category-preview-v012 .tkc015-breadcrumb-source { display: none !important; } /* Keep the transition from navigation bar into category content compact. */ html.tinks-category-preview-v012 #content > .tkc012-category-head { margin-top: 0 !important; } /* ========================================================================== V0.1.7 — Navigate button normal-state fix ========================================================================== */ html.tinks-category-preview-v012 .tkc015-navigate-button, html.tinks-category-preview-v012 .tkc015-navigate-button:link, html.tinks-category-preview-v012 .tkc015-navigate-button:visited, html.tinks-category-preview-v012 .tkc015-navigate-button:focus, html.tinks-category-preview-v012 .tkc015-navigate-button:active { opacity: 1 !important; border: 1px solid var(--tkc-line-strong) !important; background: #ffffff !important; background-image: none !important; color: #404750 !important; filter: none !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; text-shadow: none !important; cursor: pointer !important; } html.tinks-category-preview-v012 .tkc015-navigate-button[disabled], html.tinks-category-preview-v012 .tkc015-navigate-button.disabled { opacity: 1 !important; pointer-events: auto !important; } html.tinks-category-preview-v012 .tkc015-navigate-button:hover, html.tinks-category-preview-v012 .tkc015-navigate-wrap.is-open .tkc015-navigate-button { border-color: #bcc2c9 !important; background: #f6f7f8 !important; color: #20252b !important; } /* Ensure the icon/caret don't inherit muted disabled colouring. */ html.tinks-category-preview-v012 .tkc015-navigate-button .tkc015-nav-icon, html.tinks-category-preview-v012 .tkc015-navigate-button .tkc015-nav-caret { opacity: 1 !important; filter: none !important; } html.tinks-category-preview-v012 .tkc015-navigate-button .tkc015-nav-icon { border-left-color: #6f7780 !important; } html.tinks-category-preview-v012 .tkc015-navigate-button .tkc015-nav-icon::before, html.tinks-category-preview-v012 .tkc015-navigate-button .tkc015-nav-icon::after { border-top-color: #6f7780 !important; } /* ========================================================================== V0.1.8 — fully neutralise legacy muted/disabled styling on Navigate ========================================================================== */ html.tinks-category-preview-v012 .tkc015-navigate-wrap, html.tinks-category-preview-v012 .tkc015-navigate-wrap *, html.tinks-category-preview-v012 .tkc015-navigate-button { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; } html.tinks-category-preview-v012 .tkc015-navigate-button { -webkit-appearance: none !important; appearance: none !important; background-color: #fff !important; background-image: none !important; color: #20252b !important; -webkit-text-fill-color: #20252b !important; border-color: #cfd4da !important; text-shadow: none !important; box-shadow: 0 1px 2px rgba(16,24,40,.05) !important; cursor: pointer !important; } html.tinks-category-preview-v012 .tkc015-navigate-button *, html.tinks-category-preview-v012 .tkc015-navigate-button span { color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; filter: none !important; } html.tinks-category-preview-v012 .tkc015-navigate-button:hover, html.tinks-category-preview-v012 .tkc015-navigate-button:focus, html.tinks-category-preview-v012 .tkc015-navigate-wrap.is-open .tkc015-navigate-button { background-color: #f7f8f9 !important; color: #20252b !important; -webkit-text-fill-color: #20252b !important; border-color: #bcc3ca !important; } html.tinks-category-preview-v012 .tkc015-nav-icon { border-left-color: #59616b !important; } html.tinks-category-preview-v012 .tkc015-nav-icon::before, html.tinks-category-preview-v012 .tkc015-nav-icon::after { border-top-color: #59616b !important; } html.tinks-category-preview-v012 .tkc015-nav-caret { border-right-color: #59616b !important; border-bottom-color: #59616b !important; } /* ========================================================================== V0.1.9 Navigate button skin is now set inline by JS with !important declarations to bypass BurnEngine's external non-hover button-state rule. ========================================================================== */ /* ========================================================================== V0.2.0 — Navigate stacking fix ========================================================================== */ /* * The Navigate wrapper previously used z-index:60. Because the site's header * is sticky, that allowed the button to paint ABOVE the header after its * category row had scrolled underneath it. * * Keep the trigger in the normal category-page stacking order. */ html.tinks-category-preview-v012 .tkc015-navigate-wrap { z-index: auto !important; isolation: auto !important; } /* * The popup only needs to sit above neighbouring category content. * It should not outrank the site's sticky header. */ html.tinks-category-preview-v012 .tkc015-navigate-menu { z-index: 8 !important; } /* * Give the whole modern category header a modest local stacking context. * This keeps its popup above chips/toolbar while still remaining beneath * the site's sticky header. */ html.tinks-category-preview-v012 #content > .tkc012-category-head { position: relative !important; z-index: 2 !important; } /* Toolbar and catalogue remain beneath the category heading. */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { position: relative !important; z-index: 1 !important; } html.tinks-category-preview-v012 .tkc012-products { position: relative !important; z-index: 0 !important; } /* ========================================================================== V0.2.2 — Specials + Search Results support ========================================================================== */ /* Common full-width product system on all catalogue-style pages. */ html.tinks-category-preview-v012 .tkc022-products-row, html.tinks-category-preview-v012 .tkc022-products-row > .row, html.tinks-category-preview-v012 .tkc022-product-column { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* The old listing-options wrapper is now empty once its product-filter moves. */ html.tinks-category-preview-v012 .tkc022-listing-options { margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; } html.tinks-category-preview-v012 .tkc022-listing-options:has(> .product-filter:only-child), html.tinks-category-preview-v012 .tkc022-listing-options:empty { display: none !important; } /* -------------------------------------------------------------------------- Specials -------------------------------------------------------------------------- */ html.tinks-category-preview-v012.tkc022-special .tkc012-title-row, html.tinks-category-preview-v012.tkc022-search .tkc012-title-row { grid-template-columns: minmax(0, 1fr) auto !important; } html.tinks-category-preview-v012.tkc022-special .tkc012-title, html.tinks-category-preview-v012.tkc022-search .tkc012-title { grid-column: 1 !important; } html.tinks-category-preview-v012.tkc022-special .tkc012-count, html.tinks-category-preview-v012.tkc022-search .tkc012-count { grid-column: 2 !important; } html.tinks-category-preview-v012.tkc022-special .tkc012-category-head { padding-bottom: 24px !important; } /* -------------------------------------------------------------------------- Search results -------------------------------------------------------------------------- */ /* Replace BurnEngine's plain "Search" page title with our modern result title. */ html.tinks-category-preview-v012 .tkc022-old-search-title, html.tinks-category-preview-v012 .tkc022-old-results-heading { display: none !important; } /* * Keep Search Criteria available, but make it look like part of the same * modern catalogue interface. */ html.tinks-category-preview-v012 .tkc022-search-box { width: auto !important; max-width: none !important; margin: 0 var(--tkc-pad) 22px !important; padding: 18px !important; border: 1px solid var(--tkc-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: var(--tkc-shadow) !important; } html.tinks-category-preview-v012 .tkc022-search-box > h2 { margin: 0 0 14px !important; color: var(--tkc-ink) !important; font-size: 15px !important; font-weight: 750 !important; } html.tinks-category-preview-v012 .tkc022-search-box #adv_search_box { display: grid !important; grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(190px, 1fr) auto !important; gap: 10px !important; margin: 0 !important; } html.tinks-category-preview-v012 .tkc022-search-box #adv_search_box > [class*="col-"] { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } html.tinks-category-preview-v012 .tkc022-search-box .form-control { width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--tkc-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: #3e454e !important; box-shadow: none !important; } html.tinks-category-preview-v012 .tkc022-search-box #button-search { min-width: 110px !important; height: 42px !important; margin: 0 !important; padding: 0 18px !important; border: 1px solid var(--tkc-red) !important; border-radius: 9px !important; background: var(--tkc-red) !important; color: #fff !important; box-shadow: none !important; font-weight: 700 !important; } html.tinks-category-preview-v012 .tkc022-search-box #button-search:hover { border-color: var(--tkc-red-dark) !important; background: var(--tkc-red-dark) !important; } /* BurnEngine explicitly MobileHide's these search result controls. */ html.tinks-category-preview-v012 .tkc022-force-visible { display: flex !important; } /* Search/special result cards may not contain the old More Details button. JS creates one from the product title URL so the same conjoined footer works. */ /* -------------------------------------------------------------------------- Mobile adjustments -------------------------------------------------------------------------- */ @media (max-width: 900px) { html.tinks-category-preview-v012.tkc022-special .tkc012-title-row, html.tinks-category-preview-v012.tkc022-search .tkc012-title-row { grid-template-columns: minmax(0, 1fr) !important; } html.tinks-category-preview-v012.tkc022-special .tkc012-title, html.tinks-category-preview-v012.tkc022-search .tkc012-title, html.tinks-category-preview-v012.tkc022-special .tkc012-count, html.tinks-category-preview-v012.tkc022-search .tkc012-count { grid-column: 1 !important; } html.tinks-category-preview-v012 .tkc022-search-box { margin-left: var(--tkc-pad) !important; margin-right: var(--tkc-pad) !important; padding: 14px !important; } html.tinks-category-preview-v012 .tkc022-search-box #adv_search_box { grid-template-columns: 1fr !important; } html.tinks-category-preview-v012 .tkc022-search-box #button-search { width: 100% !important; } html.tinks-category-preview-v012 .tkc022-force-visible { display: flex !important; } } /* ========================================================================== V0.2.3 — normal-flow toolbar + search ordering ========================================================================== */ /* * Sticky behaviour from V0.2.1 is intentionally rolled back. * The controls now participate in normal document flow on every listing page. */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 1 !important; width: 100% !important; margin: 0 !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06) !important; } html.tinks-category-preview-v012 #content > .tkc012-toolbar::after { display: none !important; content: none !important; } /* Search page: heading -> criteria -> controls -> products. */ html.tinks-category-preview-v012.tkc022-search #content > .tkc022-search-box { position: relative !important; z-index: 1 !important; display: block !important; width: auto !important; max-width: none !important; margin: 0 var(--tkc-pad) 22px !important; } html.tinks-category-preview-v012.tkc022-search #content > .tkc012-toolbar { clear: both !important; margin-top: 0 !important; } /* The old BurnEngine row no longer needs to reserve space for the moved box. */ html.tinks-category-preview-v012.tkc022-search .tkc022-products-row { margin-top: 0 !important; padding-top: 0 !important; } /* Specials: keep controls immediately after the Specials heading. */ html.tinks-category-preview-v012.tkc022-special #content > .tkc012-toolbar { margin-top: 0 !important; } /* Product grid should begin cleanly beneath the controls. */ html.tinks-category-preview-v012 .tkc022-product-system { margin-top: 0 !important; } @media (max-width: 900px) { html.tinks-category-preview-v012.tkc022-search #content > .tkc022-search-box { margin: 0 var(--tkc-pad) 16px !important; } } /* V0.2.4 — restore full-width category product column */ html.tinks-category-preview-v012.tkc022-category .tkc012-products-row, html.tinks-category-preview-v012.tkc022-category .tkc012-products-row > .row, html.tinks-category-preview-v012.tkc022-category .tkc012-product-column { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-product-column[class*="col-"], html.tinks-category-preview-v012.tkc022-category .tkc012-product-column[class*="col_"] { flex: none !important; width: 100% !important; max-width: 100% !important; } html.tinks-category-preview-v012.tkc022-category .tkc022-product-system, html.tinks-category-preview-v012.tkc022-category .tkc012-products { width: 100% !important; max-width: none !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-products.tkc012-view-grid { display: grid !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-products.tkc012-view-list { display: flex !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-products-row > .row { grid-template-columns: 1fr !important; column-gap: 0 !important; } /* ========================================================================== V0.2.5 — mobile category compression + toolbar cleanup ========================================================================== */ /* Child categories exist inside Navigate for mobile only. */ html.tinks-category-preview-v012 .tkc025-nav-children { display: none !important; } /* -------------------------------------------------------------------------- MOBILE / TABLET -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* * BurnEngine leaves a small vertical offset between its restored mobile * header and #content. Pull only catalogue category pages up into that gap. */ html.tinks-category-preview-v012.tkc022-category #content.tkc012-content { margin-top: -22px !important; } /* * Desktop chips are redundant on mobile. All child categories are available * inside Navigate immediately beneath the current category instead. */ html.tinks-category-preview-v012.tkc022-category .tkc012-explore-label, html.tinks-category-preview-v012.tkc022-category .tkc012-chips { display: none !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-category-head { padding: 20px var(--tkc-pad) 16px !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-title-row { margin-bottom: 0 !important; } /* Title: Navigate icon + title on row one, count below. */ html.tinks-category-preview-v012.tkc022-category .tkc012-title-row { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 8px !important; align-items: center !important; } html.tinks-category-preview-v012.tkc022-category .tkc015-navigate-wrap { grid-column: 1 !important; grid-row: 1 !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-title { grid-column: 2 !important; grid-row: 1 !important; font-size: clamp(25px, 6.4vw, 35px) !important; line-height: 1.04 !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-count { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: start !important; margin: 0 !important; font-size: 13px !important; } /* Mobile Navigate panel gets a little wider and becomes scrollable. */ html.tinks-category-preview-v012 .tkc015-navigate-menu { width: min(360px, calc(100vw - 28px)) !important; max-width: min(360px, calc(100vw - 28px)) !important; max-height: min(72vh, 620px) !important; overflow-y: auto !important; overscroll-behavior: contain !important; } html.tinks-category-preview-v012 .tkc025-nav-children { display: block !important; margin: 7px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid #e4e7ea !important; } html.tinks-category-preview-v012 .tkc025-nav-children-label { margin: 0 !important; padding: 5px 11px 8px !important; color: #8a929b !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } html.tinks-category-preview-v012 .tkc025-nav-child { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 40px !important; margin: 0 !important; padding: 8px 11px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #454d57 !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.2 !important; text-decoration: none !important; } html.tinks-category-preview-v012 .tkc025-nav-child:hover { background: #f3f5f6 !important; color: #20252b !important; } html.tinks-category-preview-v012 .tkc025-nav-child span { flex: 0 0 auto !important; color: #9299a1 !important; font-size: 11px !important; font-weight: 600 !important; } /* ------------------------------------------------------------------------ Mobile catalogue toolbar ------------------------------------------------------------------------ */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { display: block !important; padding: 10px var(--tkc-pad) !important; overflow: visible !important; } html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { display: grid !important; grid-template-columns: 94px 92px minmax(135px, 1fr) !important; align-items: end !important; justify-content: stretch !important; gap: 9px !important; width: 100% !important; min-width: 0 !important; } /* Grid / List icon pair */ html.tinks-category-preview-v012 .tkc012-product-filter .display { display: grid !important; grid-template-columns: repeat(2, 42px) !important; gap: 6px !important; align-self: end !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; font-size: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a i { margin: 0 !important; font-size: 15px !important; line-height: 1 !important; } /* Show and Sort become neat labelled controls instead of cramped inline text. */ html.tinks-category-preview-v012 .tkc012-product-filter .limit, html.tinks-category-preview-v012 .tkc012-product-filter .sort { display: grid !important; grid-template-rows: auto 42px !important; gap: 5px !important; min-width: 0 !important; width: 100% !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit b, html.tinks-category-preview-v012 .tkc012-product-filter .sort b { display: block !important; margin: 0 !important; padding: 0 !important; color: #5c6470 !important; font-size: 10.5px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; } html.tinks-category-preview-v012 .tkc012-product-filter select { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; margin: 0 !important; padding: 0 28px 0 10px !important; font-size: 12px !important; line-height: 42px !important; } } /* Very narrow phones: preserve usable Sort width. */ @media (max-width: 430px) { html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { grid-template-columns: 90px 78px minmax(118px, 1fr) !important; gap: 7px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display { grid-template-columns: repeat(2, 40px) !important; gap: 5px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } } /* ========================================================================== V0.2.6 — mobile initial-load spacing + compact controls ========================================================================== */ @media (max-width: 900px) { /* * Undo V0.2.5's negative pull-up. It placed the injected category heading * underneath the fixed mobile header on initial load. */ html.tinks-category-preview-v012.tkc022-category #content.tkc012-content { margin-top: 0 !important; } /* * BurnEngine's #content carries tb_pt_40 etc. Our catalogue layout owns the * spacing, so keep the actual content box flush and let the category header * provide the deliberate breathing room. */ html.tinks-category-preview-v012 #content.tkc012-content { padding-top: 0 !important; } html.tinks-category-preview-v012.tkc022-category #content > .tkc012-category-head { padding-top: 18px !important; padding-bottom: 14px !important; } /* Slightly tighter title/count block. */ html.tinks-category-preview-v012.tkc022-category .tkc012-title-row { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 7px !important; margin: 0 !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-title { font-size: clamp(24px, 6vw, 34px) !important; line-height: 1.05 !important; } html.tinks-category-preview-v012.tkc022-category .tkc012-count { line-height: 1.2 !important; } /* ------------------------------------------------------------------------ Compact one-line mobile view toolbar ------------------------------------------------------------------------ */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { display: block !important; min-height: 0 !important; padding: 8px var(--tkc-pad) 9px !important; } html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { display: grid !important; grid-template-columns: 92px 92px minmax(0, 1fr) !important; align-items: end !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* * Two icon buttons occupy the first column and line up to the select boxes. */ html.tinks-category-preview-v012 .tkc012-product-filter .display { display: grid !important; grid-template-columns: repeat(2, 41px) !important; align-items: end !important; gap: 6px !important; width: 88px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { width: 41px !important; min-width: 41px !important; max-width: 41px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; } /* * Show and Sort each become a small field with a label above it. * Override any legacy Bootstrap/BurnEngine width on the inner wrappers. */ html.tinks-category-preview-v012 .tkc012-product-filter .limit, html.tinks-category-preview-v012 .tkc012-product-filter .sort { display: grid !important; grid-template-rows: 13px 42px !important; align-items: end !important; gap: 4px !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 59px !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit b, html.tinks-category-preview-v012 .tkc012-product-filter .sort b { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; font-weight: 750 !important; line-height: 13px !important; white-space: nowrap !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit select, html.tinks-category-preview-v012 .tkc012-product-filter .sort select, html.tinks-category-preview-v012 .tkc012-product-filter select { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; margin: 0 !important; padding: 0 30px 0 10px !important; font-size: 12px !important; line-height: normal !important; box-sizing: border-box !important; } /* * The first icon group has no visible label; reserve equivalent top space * so its buttons align perfectly with the two selects. */ html.tinks-category-preview-v012 .tkc012-product-filter .display { margin-top: 17px !important; } /* Reduce the visual dead-zone before products. */ html.tinks-category-preview-v012 .tkc012-products { padding-top: 14px !important; } } @media (max-width: 430px) { html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { grid-template-columns: 88px 78px minmax(0, 1fr) !important; gap: 8px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display { grid-template-columns: repeat(2, 39px) !important; width: 84px !important; gap: 6px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { width: 39px !important; min-width: 39px !important; max-width: 39px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit select, html.tinks-category-preview-v012 .tkc012-product-filter .sort select { padding-left: 8px !important; padding-right: 26px !important; } } /* ========================================================================== V0.2.7 — mobile header breathing room + robust toolbar fields ========================================================================== */ @media (max-width: 900px) { /* * The mobile site header already occupies its own document space. * Keep #content in normal flow, but give the injected category header * a deliberate visual gap beneath the dark header. */ html.tinks-category-preview-v012.tkc022-category #content.tkc012-content { margin-top: 0 !important; padding-top: 0 !important; } html.tinks-category-preview-v012.tkc022-category #content > .tkc012-category-head { position: relative !important; top: auto !important; transform: none !important; margin: 0 !important; padding: 26px var(--tkc-pad) 17px !important; } /* * Keep the title comfortably clear of the header while remaining compact. */ html.tinks-category-preview-v012.tkc022-category .tkc012-title-row { margin: 0 !important; padding: 0 !important; } /* * Mobile toolbar: one predictable grid. * * [ Grid/List ] [ Show ] [ Sort By ] * * Labels occupy a fixed 14px row; every clickable/select field then gets * the same 48px control height. */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { display: block !important; width: 100% !important; min-height: 78px !important; margin: 0 !important; padding: 10px var(--tkc-pad) 11px !important; overflow: visible !important; box-sizing: border-box !important; } html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { display: grid !important; grid-template-columns: 92px 108px minmax(0, 1fr) !important; grid-template-rows: 14px 48px !important; column-gap: 10px !important; row-gap: 5px !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; height: 67px !important; margin: 0 !important; padding: 0 !important; } /* * Grid/List has no label, so place it directly in the control row. */ html.tinks-category-preview-v012 .tkc012-product-filter .display { grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(2, 43px) !important; gap: 6px !important; align-self: stretch !important; width: 92px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { display: flex !important; align-items: center !important; justify-content: center !important; width: 43px !important; min-width: 43px !important; max-width: 43px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* * Flatten the old limit/sort wrappers into our grid. */ html.tinks-category-preview-v012 .tkc012-product-filter .limit, html.tinks-category-preview-v012 .tkc012-product-filter .sort { display: contents !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit b { grid-column: 2 !important; grid-row: 1 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .sort b { grid-column: 3 !important; grid-row: 1 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit b, html.tinks-category-preview-v012 .tkc012-product-filter .sort b { display: block !important; align-self: end !important; width: 100% !important; height: 14px !important; margin: 0 !important; padding: 0 !important; color: #59616b !important; font-size: 10.5px !important; font-weight: 750 !important; line-height: 14px !important; white-space: nowrap !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit select { grid-column: 2 !important; grid-row: 2 !important; } html.tinks-category-preview-v012 .tkc012-product-filter .sort select { grid-column: 3 !important; grid-row: 2 !important; } /* * Explicit appearance/background/height prevents BurnEngine's select skin * from leaving only a shallow background behind the visible text. */ html.tinks-category-preview-v012 .tkc012-product-filter .limit select, html.tinks-category-preview-v012 .tkc012-product-filter .sort select { display: block !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 34px 0 12px !important; border: 1px solid #cfd4da !important; border-radius: 10px !important; background-color: #fff !important; background-clip: padding-box !important; color: #3f4750 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 46px !important; box-shadow: none !important; box-sizing: border-box !important; opacity: 1 !important; } /* * Put a little separation between controls and cards, but avoid the huge * dead zone that existed in the first mobile iterations. */ html.tinks-category-preview-v012 .tkc012-products { padding-top: 18px !important; } } @media (max-width: 430px) { html.tinks-category-preview-v012 .product-filter.tkc012-product-filter { grid-template-columns: 88px 94px minmax(0, 1fr) !important; column-gap: 8px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display { grid-template-columns: repeat(2, 41px) !important; width: 88px !important; gap: 6px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .display a { width: 41px !important; min-width: 41px !important; max-width: 41px !important; } html.tinks-category-preview-v012 .tkc012-product-filter .limit select, html.tinks-category-preview-v012 .tkc012-product-filter .sort select { padding-left: 10px !important; padding-right: 30px !important; font-size: 12.5px !important; } } /* ========================================================================== V0.2.8 — mobile toolbar bottom breathing room ========================================================================== */ @media (max-width: 900px) { /* * Keep the existing control geometry exactly as-is; only give the white * toolbar background more room beneath the 48px controls. */ html.tinks-category-preview-v012 #content > .tkc012-toolbar { min-height: 88px !important; padding-top: 10px !important; padding-bottom: 20px !important; } /* * Maintain a clean visual handoff from the toolbar background to the * catalogue canvas below. */ html.tinks-category-preview-v012 .tkc012-products { padding-top: 16px !important; } } /* ========================================================================== V0.2.9 — tighter mobile product start + collapsible Search Criteria ========================================================================== */ /* -------------------------------------------------------------------------- Search Criteria accordion -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc029-search-criteria-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--tkc-ink) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.2 !important; text-align: left !important; cursor: pointer !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-caret { display: inline-block !important; flex: 0 0 auto !important; width: 8px !important; height: 8px !important; margin: -4px 4px 0 0 !important; border-right: 2px solid #68717d !important; border-bottom: 2px solid #68717d !important; transform: rotate(45deg) !important; transition: transform 160ms ease !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-toggle[aria-expanded="true"] .tkc029-search-criteria-caret { margin-top: 4px !important; transform: rotate(225deg) !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-body[hidden] { display: none !important; } /* Desktop remains visually equivalent to the existing open panel. */ @media (min-width: 901px) { html.tinks-category-preview-v012 .tkc029-search-criteria-toggle { cursor: default !important; } } /* -------------------------------------------------------------------------- Mobile refinements -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* * Pull the first product row closer to the controls. * The previous versions accumulated padding on both the product system and * the listing itself, creating the large blank band visible in the screenshot. */ html.tinks-category-preview-v012 .tkc022-product-system { margin-top: 0 !important; padding-top: 0 !important; } html.tinks-category-preview-v012 .tkc012-products { margin-top: 0 !important; padding-top: 6px !important; } html.tinks-category-preview-v012 .tkc022-products-row { margin-top: 0 !important; padding-top: 0 !important; } /* * Search Criteria is compact when collapsed. */ html.tinks-category-preview-v012.tkc022-search #content > .tkc022-search-box { margin-bottom: 12px !important; padding: 12px 14px !important; } html.tinks-category-preview-v012.tkc022-search #content > .tkc022-search-box.tkc029-search-collapsed { padding-top: 7px !important; padding-bottom: 7px !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-toggle { min-height: 42px !important; font-size: 14px !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-body { padding-top: 10px !important; } /* * When the criteria panel is collapsed the toolbar should follow closely, * rather than retaining spacing intended for the expanded form. */ html.tinks-category-preview-v012.tkc022-search #content > .tkc022-search-box.tkc029-search-collapsed + .tkc012-toolbar { margin-top: 0 !important; } } /* ========================================================================== V0.3.0 — Search Criteria skin fix + remove mobile dead space ========================================================================== */ /* -------------------------------------------------------------------------- Search Criteria: fully neutralise BurnEngine button skins -------------------------------------------------------------------------- */ html.tinks-category-preview-v012 .tkc029-search-criteria-toggle, html.tinks-category-preview-v012 .tkc029-search-criteria-toggle:hover, html.tinks-category-preview-v012 .tkc029-search-criteria-toggle:focus, html.tinks-category-preview-v012 .tkc029-search-criteria-toggle:active { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; } html.tinks-category-preview-v012 .tkc029-search-criteria-toggle *, html.tinks-category-preview-v012 .tkc029-search-criteria-toggle span { color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; filter: none !important; } /* * Keep the outer Search Criteria card white in both collapsed and expanded * states. Only the body visibility changes. */ html.tinks-category-preview-v012 .tkc022-search-box, html.tinks-category-preview-v012 .tkc022-search-box.tkc029-search-collapsed, html.tinks-category-preview-v012 .tkc022-search-box.tkc029-search-open { background: #fff !important; background-color: #fff !important; background-image: none !important; } /* -------------------------------------------------------------------------- Mobile: collapse the remaining legacy product-wrapper vertical space -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* * BurnEngine still contributes top spacing through the product-system row, * column, system wrapper, listing options wrapper and listing itself. * Remove it at every level so the first cards start shortly after controls. */ html.tinks-category-preview-v012 .tkc022-products-row, html.tinks-category-preview-v012 .tkc022-products-row > .row, html.tinks-category-preview-v012 .tkc022-product-column, html.tinks-category-preview-v012 .tkc022-product-system, html.tinks-category-preview-v012 .tkc022-listing-options, html.tinks-category-preview-v012 .tkc012-products { margin-top: 0 !important; padding-top: 0 !important; } /* * BurnEngine commonly uses tb_pt_* helper classes on the same wrappers. * Neutralise them only inside our catalogue product area on mobile. */ html.tinks-category-preview-v012 .tkc022-products-row[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-product-column[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-product-system[class*="tb_pt_"] { padding-top: 0 !important; } /* * Keep a small intentional gap belonging to OUR listing, rather than the * much larger inherited gap from the old layout. */ html.tinks-category-preview-v012 .tkc012-products { padding-top: 8px !important; } /* * Some BurnEngine rows create spacing with ::before. Remove it from the * modern product row only. */ html.tinks-category-preview-v012 .tkc022-products-row::before, html.tinks-category-preview-v012 .tkc022-product-column::before, html.tinks-category-preview-v012 .tkc022-product-system::before { display: none !important; content: none !important; } } /* ========================================================================== V0.3.1 — remove legacy wrapper gap before product listing ========================================================================== */ @media (max-width: 900px) { /* * The remaining dead zone is not inside .tkc012-products. It is created by * BurnEngine's nested row/main/column wrappers between the toolbar and the * product system. Flatten the whole vertical chain. */ html.tinks-category-preview-v012 .tkc022-products-row, html.tinks-category-preview-v012 .tkc022-products-row > .row, html.tinks-category-preview-v012 .tkc022-products-row > .row > .main, html.tinks-category-preview-v012 .tkc022-products-row .tkc022-product-column, html.tinks-category-preview-v012 .tkc022-product-system, html.tinks-category-preview-v012 .tkc022-listing-options { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* * BurnEngine helper classes such as tb_mt_*, tb_mb_*, tb_pt_* and tb_pb_* * may sit on any of those wrappers. Neutralise their vertical contribution * only inside the catalogue product chain. */ html.tinks-category-preview-v012 .tkc022-products-row[class*="tb_mt_"], html.tinks-category-preview-v012 .tkc022-products-row[class*="tb_mb_"], html.tinks-category-preview-v012 .tkc022-products-row[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-products-row[class*="tb_pb_"], html.tinks-category-preview-v012 .tkc022-products-row > .row[class*="tb_mt_"], html.tinks-category-preview-v012 .tkc022-products-row > .row[class*="tb_mb_"], html.tinks-category-preview-v012 .tkc022-products-row > .row[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-products-row > .row[class*="tb_pb_"], html.tinks-category-preview-v012 .tkc022-product-column[class*="tb_mt_"], html.tinks-category-preview-v012 .tkc022-product-column[class*="tb_mb_"], html.tinks-category-preview-v012 .tkc022-product-column[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-product-column[class*="tb_pb_"], html.tinks-category-preview-v012 .tkc022-product-system[class*="tb_mt_"], html.tinks-category-preview-v012 .tkc022-product-system[class*="tb_mb_"], html.tinks-category-preview-v012 .tkc022-product-system[class*="tb_pt_"], html.tinks-category-preview-v012 .tkc022-product-system[class*="tb_pb_"] { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* * Inner BurnEngine rows often use generated gutter classes. Keep horizontal * gutter behaviour, but do not allow those rows to add vertical separation. */ html.tinks-category-preview-v012 .tkc022-products-row > .row { row-gap: 0 !important; } /* * Remove generated pseudo-element spacers from every wrapper in the chain. */ html.tinks-category-preview-v012 .tkc022-products-row::before, html.tinks-category-preview-v012 .tkc022-products-row::after, html.tinks-category-preview-v012 .tkc022-products-row > .row::before, html.tinks-category-preview-v012 .tkc022-products-row > .row::after, html.tinks-category-preview-v012 .tkc022-product-column::before, html.tinks-category-preview-v012 .tkc022-product-column::after, html.tinks-category-preview-v012 .tkc022-product-system::before, html.tinks-category-preview-v012 .tkc022-product-system::after { content: none !important; display: none !important; } /* * Now own the one intentional gap before the cards ourselves. */ html.tinks-category-preview-v012 .tkc012-products { margin-top: 0 !important; padding-top: 10px !important; } } /* ========================================================================== V0.3.2 — compact desktop list view + grouped Ex GST pricing ========================================================================== */ /* Price area owns every price-related value, including Ex GST. */ html.tinks-category-preview-v012 .tkc012-price-row { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 3px !important; } html.tinks-category-preview-v012 .tkc032-price-tax { display: block !important; margin: 0 !important; padding: 0 !important; color: #8b929a !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.15 !important; text-align: right !important; white-space: nowrap !important; } /* -------------------------------------------------------------------------- Desktop / large tablet list view -------------------------------------------------------------------------- */ @media (min-width: 901px) { /* * Treat list view as a genuinely compact information row rather than a * horizontally stretched grid card. */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list { gap: 10px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { grid-template-columns: 165px minmax(0, 1fr) minmax(205px, 235px) !important; grid-template-rows: auto 1fr !important; column-gap: 18px !important; row-gap: 0 !important; min-height: 168px !important; padding: 12px 14px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 165px !important; height: 142px !important; margin: 0 !important; padding: 5px !important; align-self: center !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-name { grid-column: 2 !important; grid-row: 1 !important; min-height: 0 !important; margin: 3px 0 6px !important; font-size: 13.5px !important; font-weight: 760 !important; line-height: 1.25 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-description { grid-column: 2 !important; grid-row: 2 !important; -webkit-line-clamp: 3 !important; max-height: 54px !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1.42 !important; } /* * Price/actions become a compact right-side stack. */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card-footer { grid-column: 3 !important; grid-row: 1 / span 2 !important; display: flex !important; flex-direction: column !important; align-self: stretch !important; justify-content: flex-end !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-price-row { min-height: 0 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-price { font-size: 17px !important; line-height: 1.05 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-price .price-old { font-size: 10px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc032-price-tax { font-size: 9.5px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-actions { min-height: 36px !important; border-radius: 8px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-action { min-height: 36px !important; padding: 7px 8px !important; font-size: 10.5px !important; } /* Discount badge follows the reduced list-card scale. */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-sale-badge { top: 9px !important; left: 9px !important; min-width: 38px !important; height: 21px !important; padding: 0 6px !important; font-size: 9.5px !important; } } /* -------------------------------------------------------------------------- Extra-wide screens can be denser again without hurting readability. -------------------------------------------------------------------------- */ @media (min-width: 1450px) { html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { grid-template-columns: 175px minmax(0, 1fr) 235px !important; min-height: 160px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { width: 175px !important; height: 135px !important; } } /* ========================================================================== V0.3.3 — increase legibility inside compact desktop list view ========================================================================== */ @media (min-width: 901px) { /* * Keep the compact list-row concept from V0.3.2, but make the retail * information more prominent and easier to scan. */ html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { grid-template-columns: 175px minmax(0, 1fr) minmax(235px, 265px) !important; min-height: 182px !important; column-gap: 22px !important; padding: 14px 16px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { width: 175px !important; height: 150px !important; padding: 6px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-name { margin: 4px 0 8px !important; font-size: 15.5px !important; font-weight: 760 !important; line-height: 1.28 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-description { -webkit-line-clamp: 4 !important; max-height: 78px !important; font-size: 13px !important; line-height: 1.48 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card-footer { gap: 10px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-price { font-size: 20.5px !important; font-weight: 780 !important; line-height: 1.05 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-price .price-old { font-size: 11px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc032-price-tax { font-size: 10.5px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-actions { min-height: 42px !important; border-radius: 9px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-action { min-height: 42px !important; padding: 9px 11px !important; font-size: 12px !important; font-weight: 760 !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-sale-badge { min-width: 41px !important; height: 23px !important; padding: 0 7px !important; font-size: 10.5px !important; } } /* Slightly more generous on very wide screens. */ @media (min-width: 1450px) { html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-card { grid-template-columns: 185px minmax(0, 1fr) 270px !important; min-height: 186px !important; } html.tinks-category-preview-v012 .tkc012-products.tkc012-view-list .tkc012-image { width: 185px !important; height: 154px !important; } }