/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

.vw-brand-description{
    margin-bottom:0px;
}

.vw-brand-title{
display:none;
}

.vw-brand-text{
    line-height:1.7;
	font-size:14px;
}

.vw-subcategories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 20px 0;
}

.vw-subcategory-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    border: 1px solid #d9d9d9;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
	    padding: 0;
	min-height:auto;
	background:#fff;
	 box-shadow: 0 3px 6px rgb(0 0 0 / .25) !important;
	min-height: 60px;
}

.vw-subcategory-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.vw-subcategory-content {
    flex: 1;
    padding-left: 12px;
}

.vw-subcategory-content h3 {
    margin: 0;
    color: #111;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.35;
}

.vw-subcategory-image {
    width: 60px;
    flex-shrink: 0;
    text-align: center;
	object-fit: contain;
}
.vw-subcategory-image img{
	height: 60px;
	width:60px;
	display: block;
}


/* Tablet */
@media (max-width: 1024px) {
    .vw-subcategories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .vw-subcategories-grid {
        grid-template-columns: 1fr;
    }

    .vw-subcategory-card {
        min-height: 110px;
        padding: 15px;
    }

    .vw-subcategory-content h3 {
        font-size: 22px;
    }

    .vw-subcategory-image {
        width: 60px;
    }

    .vw-subcategory-image img {
        max-height: 70px;
    }
}



	.vw-parent-category{
	        border-bottom:1px solid #eee;
		padding-bottom: .725rem;
		margin-bottom: .725rem;
	    }
	.vw-children ul {
	    padding: 0 !important;
	       margin: 0 0 0 1rem !important;
	}
    .vw-parent-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        cursor:pointer;
    }

    .vw-parent-left{
        display:flex;
        align-items:center;
        gap:15px;
    }

    .vw-parent-left img{
        width:60px;
        height:60px;
        object-fit:cover;
        border-radius:5px;
		display: block;
		min-width: 60px;
    }

    .vw-parent-title{
        font-weight:600;
        text-decoration:none;
    }

    .vw-toggle{
font-weight: bold;
    min-width: 40px;
    min-height: 40px;
    text-align: center;
    align-items: center;
    line-height: 40px;
    }

    .vw-children{
            padding: 0;
    font-size: 14px;
    }

		
		.vw-children a {
		    color: inherit;
		}
		
		.vw-children a:hover, .vw-parent-header a:hover {
		    color: #f36201;
		}
		
		.vw-parent-header a {
		    color: inherit;
		}

    .vw-children ul{
        margin:0;
        padding:0;
        list-style:none;
    }

    .vw-children li{
        margin:8px 0;
    }

    .vw-children li.current>a{
        color:#f36201;
    }

.rtsb-archive-filters.has-mobile-toggle .rtsb-archive-filters-wrapper {
    min-width: fit-content;
}




/* ==========================================================================
   VW — HOME REDESIGN   (added 2026-08-16)
   Scoped to the home page redesign. Delete this whole block to revert.
   ========================================================================== */

/* Brand cards.
   NOTE: Elementor 4.2.2 does not output the "CSS Classes" field on these
   link-wrapped containers — the class saves to the DB but never renders
   (verified: 0/10 containers vs 10/10 widgets in the same save). So the
   cards are targeted via the grid's element ID. If that section is ever
   rebuilt from scratch, update this ID. */
.elementor-element-36a528ba > .e-con {
    background-color: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.elementor-element-36a528ba > .e-con:hover {
    border-color: #0f0f10;
    box-shadow: 0 2px 4px rgba(15, 15, 16, .08), 0 18px 44px rgba(15, 15, 16, .12);
    transform: translateY(-2px);
}

/* Product shots are cut-outs on white — multiply removes the grey halo. */
.elementor-element-36a528ba > .e-con img {
    mix-blend-mode: multiply;
}

/* Part-type tiles — "Shop by part type" grid.
   Built as Elementor icon-box widgets; the CSS Classes field does output
   on widgets, so these are targeted by class. */
.vw-home-part-tile {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    transition: border-color .16s ease, background-color .16s ease;
}

.vw-home-part-tile:hover {
    border-color: #f36201;
    background: #fff8f3;
}

/* Elementor 4.x does not render .elementor-widget-container, so the padding
   has to live on the icon-box wrapper itself. */
.vw-home-part-tile .elementor-icon-box-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 18px 20px;
    min-height: 84px;
}

/* Icon tile. Elementor sets display:block on .elementor-icon-box-icon from a
   stylesheet loaded after the child theme, which silently killed the flex
   centring and pinned the glyph to the top-left corner. Hence !important. */
.vw-home-part-tile .elementor-icon-box-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #0f0f10;
}

.vw-home-part-tile .elementor-icon-box-icon .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.vw-home-part-tile .elementor-icon-box-icon .elementor-icon {
    color: #f36201;
    font-size: 19px;
}

.vw-home-part-tile .elementor-icon-box-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.15;
    text-transform: uppercase;
}

.vw-home-part-tile .elementor-icon-box-title a {
    color: #0f0f10;
}

.vw-home-part-tile .elementor-icon-box-description {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b6b75;
}

@media (max-width: 767px) {
    .vw-home-part-tile .elementor-icon-box-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .vw-home-part-tile .elementor-icon-box-title {
        font-size: 17px;
    }
}

/* Hero — ghost (outline) button.
   Two gotchas here, both verified in the DOM:
   1. The theme paints buttons with a background-IMAGE gradient, not a
      colour, so resetting background-color alone does nothing.
   2. Elementor's per-page stylesheet is enqueued AFTER the child theme,
      so an equal-specificity rule loses on source order. Hence !important. */
.vw-home-btn-ghost .elementor-button {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid rgba(255, 255, 255, .45) !important;
}

.vw-home-btn-ghost .elementor-button:hover,
.vw-home-btn-ghost .elementor-button:focus {
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: #fff !important;
}

/* Hero overlay on mobile.
   Elementor renders the container overlay as ::before. Desktop keeps its
   left-to-right gradient; mobile needs a vertical one because the copy sits
   over the bright sunset. Same source-order problem as above.
   If the hero is rebuilt, update this element ID. */
@media (max-width: 767px) {
    .elementor-element.elementor-element-9e62b66::before {
        background-image: linear-gradient(180deg,
            rgba(10, 10, 11, .94) 0%,
            rgba(10, 10, 11, .78) 55%,
            rgba(10, 10, 11, .94) 100%) !important;
    }
}

/* --------------------------------------------------------------------------
   WHY TRUCKIES BUY FROM US — USP panel
   Four icon-box widgets inside a bordered grid container, split by hairline
   dividers. Class works because these are widgets, not containers.
   -------------------------------------------------------------------------- */

.vw-home-usp .elementor-icon-box-wrapper {
    padding: 26px 24px;
    text-align: left;
}

/* Hairline dividers between cells; suppressed on the last in each row.
   These widgets carried orange borders from the old USP bar, set by Elementor's
   per-element CSS which loads after this file — hence !important. */
.vw-home-usp {
    border-right: 1px solid #33333a !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.vw-home-usp:last-child {
    border-right: 0 !important;
}

/* Icon sits in a soft orange tile rather than floating bare. */
.vw-home-usp .elementor-icon-box-icon {
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(243, 98, 1, .14);
}

.vw-home-usp .elementor-icon-box-icon .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

/* Elementor's per-element typography was rendering the description at 22px —
   larger than the 21px title — which inverted the hierarchy. Both sizes are
   forced here because that stylesheet loads after this file. */
.vw-home-usp .elementor-icon-box-title {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
}

.vw-home-usp .elementor-icon-box-description {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

@media (max-width: 1024px) {
    /* 2-up on tablet — divider only on the left-hand cell of each pair. */
    .vw-home-usp:nth-child(2n) {
        border-right: 0 !important;
    }
}

@media (max-width: 767px) {
    .vw-home-usp {
        border-right: 0 !important;
        border-bottom: 1px solid #33333a !important;
    }
    .vw-home-usp:last-child {
        border-bottom: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   BEST SELLERS — product cards (ShopBuilder grid, element 401d15c9)
   Only elements with real data behind them are shown. No star ratings
   (the store has zero product reviews), no stock counts (quantities are not
   managed) and no sale badges (nothing is on sale) — those would render
   empty or never appear.
   -------------------------------------------------------------------------- */

/* Fitment chip. ShopBuilder outputs every brand term the product carries
   (parent brand plus each model), which reads as one run-on string, so only
   the first is shown. Note some products are tagged with the model term only
   ("T350", "CF"), which is still correct fitment language for this audience.
   ShopBuilder's own .rtsb-brand-outline styles load after this file, hence
   the !important on padding and border. */
.rtsb-product .rtsb-brand-list-item:not(:first-child) {
    display: none;
}

.rtsb-product .rtsb-brand-list-item a {
    display: inline-block !important;
    padding: 3px 9px !important;
    border: 1px solid #ffd9bf !important;
    border-radius: 5px !important;
    background: #fff1e7 !important;
    color: #f36201 !important;
    font-size: 11.5px !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.rtsb-product .rtsb-brand-category {
    margin-bottom: 10px;
}

/* Title */
.rtsb-product .product-title {
    font-size: 14.5px;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* SKU */
.rtsb-product .custom-rtsb-sku {
    font-size: 11.5px;
    color: #6b6b75;
    margin-bottom: 12px;
}

/* Price */
.rtsb-product .price-wrapper .price,
.rtsb-product .price-wrapper bdi {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
}

/* Add to cart — full-width black bar.
   The real markup is li.rtsb-cart > div > a.rtsb-add-to-cart-btn, so the
   list, item and anchor all need to stretch. */
.rtsb-product .rtsb-action-buttons.content-bottom-part,
.rtsb-product .rtsb-action-buttons.content-bottom-part .rtsb-action-button-list,
.rtsb-product .rtsb-action-button-item.rtsb-cart,
.rtsb-product .rtsb-wc-add-to-cart-wrap {
    width: 100% !important;
    display: block !important;
}

.rtsb-product a.rtsb-add-to-cart-btn {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 16px !important;
    background: #0f0f10 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.rtsb-product a.rtsb-add-to-cart-btn:hover {
    background: #f36201 !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   HEADER SEARCH (FiboSearch / dgwt-wcas)
   GLOBAL — this is in the header template, so it applies on every page.
   Taller pill field with the magnifier inside, and an orange SEARCH button.
   -------------------------------------------------------------------------- */

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    height: 52px !important;
    border: 2px solid #0f0f10 !important;
    border-right: 0 !important;
    /* Rounded on all four corners, not just the left. The field spans the
       full width with the button sitting on top of its right end, so square
       right corners poked out white behind the button's rounded ones. */
    border-radius: 10px !important;
    padding-left: 44px !important;
    font-size: 15px !important;
    color: #0f0f10 !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus {
    border-color: #f36201 !important;
    box-shadow: none !important;
}

/* Magnifier inside the field, left.
   This header instance renders without FiboSearch's own .dgwt-wcas-ico-magnifier
   element (it only ships on some layouts), so the icon is drawn as an inline
   SVG background on the input instead. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6B75' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
}

/* Submit button — orange. The "Search" label and the placeholder text are
   set natively in FiboSearch (Settings > Search bar > Label / Search input
   placeholder), not faked in CSS, so they stay translatable and accessible. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
    width: auto !important;
    height: 52px !important;
    padding: 0 28px !important;
    background: #f36201 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 10px 10px 0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover {
    background: #d45400 !important;
}

/* FiboSearch's "solaris" style draws a small CSS triangle between the field
   and the button. It was coloured for the old dark button and reads as a
   notch against the orange, so it is removed. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before {
    display: none !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit .dgwt-wcas-search-submit-text,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
    font-family: "Barlow Condensed", "Oswald", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    /* Keep the icon on mobile — the word costs too much width. */
    .dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
        height: 46px !important;
    }
    .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
        height: 46px !important;
        padding: 0 16px !important;
    }
    .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
        font-size: 15px;
    }
}

/* Whole tile clickable.
   The icon-box only links its title and icon, so the rest of the card was
   dead space. The title link is stretched over the whole tile with an
   absolutely-positioned ::after. The tile itself becomes the positioning
   context. Keeps a single <a> in the markup, so no duplicate links for
   screen readers or crawlers. */
.vw-home-part-tile {
    position: relative;
}

.vw-home-part-tile .elementor-icon-box-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vw-home-part-tile:hover {
    cursor: pointer;
}