/* Hide VirtueMart debug messages but keep important alerts */
#system-message-container .alert-info:has(.vmdebug),
.vmdebug {
    display: none !important;
}

/* Hide noscript debug content */
noscript .vmdebug {
    display: none !important;
}

/* ========================================
   VirtueMart Toolbar - Hide Unwanted Buttons
   ======================================== */

/* Hide by task attribute */
joomla-toolbar-button[task="massxref_cats"],
joomla-toolbar-button[task="massxref_sgrps"],
joomla-toolbar-button[task="createchild"],
joomla-toolbar-button[task="cloneproductwithchildren"],
joomla-toolbar-button[task="addrating"] {
    display: none !important;
}

/* ========================================
   VirtueMart Side Menu - Hide Tools Section
   Tools is the 5th/last menu section
   ======================================== */

/* Hide the last uk-parent in both menus (Tools section) */
.vmuikit-menu .uk-nav.uk-nav-default > li.uk-parent:nth-child(5) {
    display: none !important;
}

/* ========================================
   Toolbar Layout Improvements
   ======================================== */

.toolbar-box {
    margin-bottom: 15px !important;
}

#toolbar {
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* ========================================
   My Account Page - Hide Admin Interface Button
   ======================================== */

/* Hide "Access Administration Interface" button */
a[title="Access Administration Interface"] {
    display: none !important;
}

/* ========================================
   Category Grid - Homepage Styling
   ======================================== */

/* Category tile container */
.category-view .row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

/* Individual category tile */
.category-view .category {
    flex: 0 0 calc(24% - 6px);
    max-width: calc(24% - 6px);
    box-sizing: border-box;
}

.category-view .category .spacer {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.category-view .category .spacer:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Category title */
.category-view .category h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    text-align: center;
}

/* Category title with product count */
.category-view .category .category-title-line {
    display: inline;
    white-space: nowrap;
}

.category-view .category .category-product-count {
    font-weight: 400;
    color: #666;
    margin-left: 3px;
}

.category-view .category h2 a {
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Category icon/image */
.category-view .category .browseCategoryImage {
    width: 130px !important;
    height: 130px !important;
    object-fit: contain;
}

/* Remove the br between title and image, reorder with flexbox */
.category-view .category h2 a br {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .category-view .category {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .category-view .category {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
    .category-view .category .spacer {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .category-view .category {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================
   Product list (front market) — compact images + counter fix
   ======================================== */

/* Shrink product-list images to match the compact category icons */
.vm-product-grid .browseProductImage {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
    margin: 0 auto;
}

/* Keep the "Results 1-6 of 6" counter on one line (it sits in a narrow column) */
.display-number {
    white-space: nowrap;
}

/* Product grid columns — match the 4/3/2/1 category grid layout */
.vm-product-grid .product { flex: 0 0 25% !important; max-width: 25% !important; }
@media (max-width: 992px) { .vm-product-grid .product { flex: 0 0 33.333% !important; max-width: 33.333% !important; } }
@media (max-width: 768px) { .vm-product-grid .product { flex: 0 0 50% !important; max-width: 50% !important; } }
@media (max-width: 480px) { .vm-product-grid .product { flex: 0 0 100% !important; max-width: 100% !important; } }

/* ========================================
   Add-to-cart area (front market listings)
   ----------------------------------------
   Yard-sale listings are single, unique items, so the quantity stepper is
   unnecessary — and packing [stepper][Add to Cart] into a 25%-wide card crushed
   the button down to "ADD T". Hide the stepper (quantity stays 1) and let the
   Add to Cart button take the full card width so its label never clips.
   ======================================== */
.vm-product-grid .addtocart-bar .quantity-box,
.vm-product-grid .addtocart-bar label.quantity_box,
.vm-product-grid .addtocart-bar .row > div:has(.quantity-box) {
    display: none !important;
}
.vm-product-grid .addtocart-bar .row { display: block !important; }
.vm-product-grid .addtocart-button,
.vm-product-grid .addtocart-bar button[type="submit"],
.vm-product-grid .addtocart-bar input[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ========================================
   Product card polish (task #31) — consistent card sizing + button alignment
   ----------------------------------------
   The bs5 grid already gives each card `d-flex flex-column h-100` so a row of
   cards is equal-height, but the inner blocks weren't aligned: short vs long
   titles pushed the price/button rows to different heights, and the action
   button floated mid-card instead of sitting at the bottom. These rules:
     - reserve a consistent image stage so cards don't jump,
     - give the title a min-height so the price row starts at the same place,
     - push the add-to-cart / details button to the card bottom (mt-auto) so the
       buttons line up across the row.
   Scoped to .vm-product-grid, purely visual, additive. REVERT: delete this block.
   ======================================== */

/* Consistent image stage (image itself stays 150x150 from the rule above) */
.vm-product-grid .vm-product-media-container {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Even out 1-line vs 2-line titles so the price row aligns across cards */
.vm-product-grid .vm-product-title {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* Tidy the short-description spacing */
.vm-product-grid .vm-product-s-desc {
    margin-bottom: .75rem;
}

/* Pin the action area to the bottom of the card so buttons align across a row */
.vm-product-grid .product-container .addtocart-bar,
.vm-product-grid .product-container > a.btn {
    margin-top: auto;
}

/* A little breathing room below the price block */
.vm-product-grid .product-container .vm-price-desc,
.vm-product-grid .product-container .product-price {
    margin-bottom: .5rem;
}

/* Smaller image stage on phones for a tighter single-column list */
@media (max-width: 480px) {
    .vm-product-grid .browseProductImage { width: 130px !important; height: 130px !important; }
    .vm-product-grid .vm-product-media-container { min-height: 140px; }
}

/* ========================================
   Product Edit Form - Hide Unnecessary Fields
   ======================================== */

/* Hide Product SKU field */
.uk-clearfix:has(#product_sku) {
    display: none !important;
}

/* Hide Manufacturer field */
.uk-clearfix:has(#virtuemart_manufacturer_id) {
    display: none !important;
}

/* Hide On Featured checkbox */
.uk-clearfix:has(#product_special) {
    display: none !important;
}

/* Hide Discontinued checkbox */
.uk-clearfix:has(#product_discontinued) {
    display: none !important;
}
/* Classic adminform markup variant (owner 2026-07-11): the seller editor renders VM's
   classic templates where the .uk-clearfix wrapper doesn't exist, so the rule above
   matches nothing. Hide ONLY the checkbox itself and its own label — never any
   container, so this can never blank a panel. */
#product_discontinued,
label[for="product_discontinued"],
label:has(> #product_discontinued) {
    display: none !important;
}

/* Hide GTIN (EAN, ISBN) field */
.uk-clearfix:has(#product_gtin) {
    display: none !important;
}

/* Hide Product Details Page layout dropdown */
.uk-clearfix:has(#layout) {
    display: none !important;
}

/* Hide Shopper Group field */
.uk-clearfix:has(select[name="virtuemart_shoppergroup_id[]"]) {
    display: none !important;
}

/* Hide Product Alias (slug) field */
.uk-clearfix:has(#slug) {
    display: none !important;
}

/* Hide MPN field */
.uk-clearfix:has(#product_mpn) {
    display: none !important;
}

/* Hide URL field */
.uk-clearfix:has(#product_url) {
    display: none !important;
}

/* Hide Child Products section (Product Parent ID field) */
.uk-clearfix:has(#product_parent_id) {
    display: none !important;
}

/* Hide the entire Child Product accordion/section if it exists */
li:has(a[href="#tabProductParent"]),
#tabProductParent {
    display: none !important;
}

/* Hide Force canonical category */
.uk-clearfix:has(#product_canon_category_id) {
    display: none !important;
}

/* Widen Categories selector */
#categories,
#categories + .chosen-container,
.uk-clearfix:has(#categories) .uk-form-controls,
select[name="categories[]"],
select[name="categories[]"] + .chosen-container {
    width: 100% !important;
    min-width: 300px !important;
}

/* ========================================
   Meta Information Section - Hide Entire Card
   ======================================== */

/* Hide the entire Meta Information card (has code icon) */
.uk-card:has([uk-icon*="icon: code"]) {
    display: none !important;
}

/* ========================================
   Product Status Section - Hide Most Fields
   ======================================== */

/* Hide In Stock */
.uk-clearfix:has(#product_in_stock) {
    display: none !important;
}

/* Hide Low Stock Notification */
.uk-clearfix:has(#low_stock_notification) {
    display: none !important;
}

/* Hide Out of Stock action dropdown */
.uk-clearfix:has(#product_stockhandle) {
    display: none !important;
}

/* Hide Availability text/image fields */
.uk-clearfix:has(#product_availability) {
    display: none !important;
}

/* Hide Booked/ordered */
.uk-clearfix:has(#product_ordered) {
    display: none !important;
}

/* Hide Purchase Quantity Steps */
.uk-clearfix:has(#step_order_level) {
    display: none !important;
}

/* Hide Minimum Purchase Quantity */
.uk-clearfix:has(#min_order_level) {
    display: none !important;
}

/* Hide Maximum Purchase Quantity */
.uk-clearfix:has(#max_order_level) {
    display: none !important;
}

/* ========================================
   Child Product Section - Hide Entire Card
   ======================================== */

/* Hide the entire Child Product card (has tree icon) */
.uk-card:has([uk-icon*="tree"]) {
    display: none !important;
}

/* ========================================
   Email to Shoppers Section - Hide Entire Card
   ======================================== */

/* Hide the entire Email to Shoppers card (has mail icon) */
.uk-card:has([uk-icon*="mail"]) {
    display: none !important;
}

/* ========================================
   Pricing Section - Simplify for Yardsale
   Keep only: Cost price input and Final price input
   ======================================== */

/* Hide Shopper Group column in pricing table */
table.productPriceTable td:has(select[name="mprices[virtuemart_shoppergroup_id][]"]) {
    display: none !important;
}

/* Hide the vertical divider before Shopper Group */
table.productPriceTable td[style*="background: #d5d5d5"] {
    display: none !important;
}

/* Hide Base price row (readonly, not needed for yardsale) */
table.productPriceTable tr:has(input[name="mprices[basePrice][]"]) {
    display: none !important;
}

/* Hide Final price row - sellers only need Cost price */
table.productPriceTable tr:has(input[name="mprices[salesPrice][]"]) {
    display: none !important;
}

/* Hide Override row */
table.productPriceTable tr:has(input[name^="mprices[override]"]) {
    display: none !important;
}

/* Hide Calculate Cost checkbox and label in Final price row */
table.productPriceTable td:has(input[name^="mprices[use_desired_price]"]) {
    display: none !important;
}

/* Hide Tax Affecting column (empty after hiding Base price row anyway) */
table.productPriceTable td:has(span[uk-tooltip*="Tax Affecting"]) {
    display: none !important;
}

/* ========================================
   Seller editor — native-field bleed + shopper-group label (owner 2026-07-10)
   ----------------------------------------
   ROOT CAUSE: the frontend seller editor (view=product&managing=1) renders VM's
   CLASSIC admin templates — <table class="adminform"> with <tr>/<td> cells — NOT the
   UIkit ".uk-clearfix" markup the field-level hides above assume. So those
   ".uk-clearfix:has(#field)" rules match nothing here, leaving SKU/GTIN/MPN,
   Manufacturer/URL and the price "shopper group" control visible and bleeding off the
   right edge on phones. These parallel rules target the real .adminform structure.
   Section-level ".uk-card:has()" hides still work (whole cards ARE UIkit) — untouched.
   Only WHOLE rows whose every field is unwanted are row-hidden; mixed rows are left
   alone so Name / Published / Categories are never hit.
   ======================================== */

/* Keep the whole editor within the viewport — the .adminform tables use many
   fixed-width columns that overflow narrow screens (the "bleeding / unreadable" report). */
table.adminform,
table.productPriceTable {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: auto !important;
}
table.adminform td,
table.productPriceTable td { min-width: 0 !important; }
table.adminform input[type="text"],
table.adminform select,
table.adminform textarea {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Row 2: SKU + GTIN + MPN (all three unwanted) — hide the entire row */
table.adminform tr:has(#product_sku),
table.adminform tr:has(#product_gtin) {
    display: none !important;
}

/* Row 3: Manufacturer + Details-page layout (unwanted) — hide the row. Keyed on the
   layout select, NOT product_url: the URL input is MOVED to its own visible
   "Reference URL" row by vmcustomloader (#174, owner 2026-07-11). */
table.adminform tr:has(> td > select[name="layout"]) {
    display: none !important;
}

/* Price table cost row: hide the trailing cells (divider + "Shopper Group" caption/select)
   that produce the "you are in shopper groups: …" label and widen the row off-screen.
   Cells 1-3 (Cost label, price input, currency) are all the seller needs. */
table.productPriceTable tr:has(input[name="mprices[product_price][]"]) td:nth-child(n+4) {
    display: none !important;
}

/* Currency dropdown (owner 2026-07-11): currency is a SELLER-LEVEL setting (#101) —
   the per-item "US Dollar" selector must not show. CSS so it can never "come back"
   on a re-render (the old one-shot JS hide was timing-dependent). The select stays in
   the DOM (display:none), so the alt-price JS still reads/binds its value.
   NOTE: VM replaces the native select with a Chosen/enhanced widget — hide the whole
   CELL that contains the currency select (covers native select + generated widget). */
table.productPriceTable select[name="mprices[product_currency][]"] {
    display: none !important;
}
table.productPriceTable td:has(select[name="mprices[product_currency][]"]) {
    display: none !important;
}
/* the generated widget sits right after the native select — hide the WIDGET only
   (adjacent siblings). Deliberately NO ancestor :has(div) rule: the price input can
   share the same wrapper, and hiding an ancestor would take the price with it
   (the :has() footgun). */
select[name="mprices[product_currency][]"] + .chzn-container,
select[name="mprices[product_currency][]"] + .chosen-container,
select[name="mprices[product_currency][]"] + .select2,
select[name="mprices[product_currency][]"] + .selectr-container,
select[name="mprices[product_currency][]"] + div[class*="select"] {
    display: none !important;
}

/* ========================================
   Internal Note Section - Hide
   ======================================== */

/* Hide Internal note card (has lock icon) */
.uk-card:has([uk-icon*="lock"]) {
    display: none !important;
}

/* ========================================
   Image Information Section - Hide Fields
   Keep only: File Title, Displayed image subtitle
   ======================================== */

/* Hide File published checkbox */
.uk-clearfix:has(#media\\[media_published\\]),
.uk-clearfix:has(input[name="media[media_published]"]),
.uk-clearfix:has(input[id*="media_published"]),
.uk-clearfix:has(label[for*="media_published"]) {
    display: none !important;
}

/* Hide "is image" checkbox */
.uk-clearfix:has(#media\\[is_image\\]) {
    display: none !important;
}

/* Hide Image Alt-Text */
.uk-clearfix:has(input[name="media[file_meta]"]) {
    display: none !important;
}

/* Hide Image Class */
.uk-clearfix:has(input[name="media[file_class]"]) {
    display: none !important;
}

/* Hide Used url */
.uk-clearfix:has(input[name="media[file_url]"]) {
    display: none !important;
}

/* Hide Used thumb url */
.uk-clearfix:has(#file_url_thumb) {
    display: none !important;
}

/* Hide Role/Displayable radio buttons - target by name patterns */
.uk-clearfix:has(input[type="radio"][name*="media_roles"]),
.uk-clearfix:has(input[type="radio"][name*="roles"]) {
    display: none !important;
}

/* Hide Storing location/type (readonly input with value product) */
.uk-clearfix:has(input[readonly][value="product"]) {
    display: none !important;
}

/* Hide Languages select */
.uk-clearfix:has(#mediaactive_languages) {
    display: none !important;
}

/* Hide Vendor in image section (has readonly span) */
.uk-clearfix:has(span.inputbox[readonly]) {
    display: none !important;
}

/* ========================================
   Hide Writeable Path Status Messages
   ======================================== */

/* Hide the server path writeable status alert */
.uk-alert-primary:has(.vmquote) {
    display: none !important;
}

/* Hide availability image selector and preview */
#imagelib,
select#image {
    display: none !important;
}

/* ========================================
   BATCH 1: Product Name, Images Search, Related
   ======================================== */

/* Make Product Information grid single column layout */
.uk-card:has(#product_name) .uk-card-body > div[uk-grid] {
    display: block !important;
}

.uk-card:has(#product_name) .uk-card-body > div[uk-grid] > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Match Product Name input width to Categories selector */
#product_name {
    width: 100% !important;
    min-width: 300px !important;
    box-sizing: border-box !important;
}

.uk-clearfix:has(#product_name) .uk-form-controls {
    width: 100% !important;
}

/* Hide Images search container (keep Upload File and Image Information) */
.vmuikit-js-images {
    display: none !important;
}

/* Hide Related Categories container */
.uk-card:has([uk-icon*="category"]) {
    display: none !important;
}

/* Hide Related Products container */
.uk-card:has([uk-icon*="product"]) {
    display: none !important;
}

/* ========================================
   BATCH 2: Fixes
   ======================================== */

/* Hide Help button */
.button-help {
    display: none !important;
}

/* Make ALL form labels consistent - normal weight, gray */
.uk-card .uk-form-label,
.uk-card:has(#product_name) .uk-form-label,
.uk-card:has(#published) .uk-form-label,
.uk-clearfix .uk-form-label,
.productPriceTable td:first-child,
.productPriceTable td:first-child div {
    font-weight: 400 !important;
    color: #666 !important;
    font-size: 14px !important;
    text-align: left !important;
}

/* Consistent vertical spacing for ALL fields in Product Information section */
.uk-card:has(#product_name) .uk-clearfix,
.uk-card:has(#published) .uk-clearfix {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Hide Vendor row - multiple selectors for reliability */
.uk-clearfix:has(span.inputbox[readonly]:not([id])),
.uk-clearfix:has(span.inputbox[readonly]) {
    display: none !important;
}

/* Collapse grid gaps in Product Information */
.uk-card:has(#product_name) .uk-card-body [uk-grid] {
    margin-top: 0 !important;
    gap: 0 !important;
}

.uk-card:has(#product_name) .uk-card-body [uk-grid] > div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.uk-card:has(#product_name) .uk-card-body .uk-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra padding/margin from the card containers */
.uk-card:has(#product_name),
.uk-card:has(#published) {
    padding: 0 !important;
}

.uk-card:has(#product_name) > .uk-card,
.uk-card:has(#published) > .uk-card {
    margin: 0 !important;
    padding: 0 !important;
}

/* Match Item Price header to other section headers */
.uk-card:has(#mainPriceTable) > .uk-card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 15px 20px 10px !important;
}

.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* Hide entire Action when out of stock container */
div.uk-margin:has(#product_stockhandle) {
    display: none !important;
}

/* Hide entire Availability container */
div.uk-margin:has(#product_availability) {
    display: none !important;
}

/* ========================================
   Replace Pricing Title with "Item Price"
   ======================================== */

/* Hide the original pricing title text but keep layout */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div {
    font-size: 0 !important;
}

/* Keep the icon visible */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div > span[uk-icon] {
    font-size: 1.2rem !important;
}

/* Add replacement text - match .uk-card-title exactly */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div::after {
    content: "Item Price";
    font-size: 1.2rem !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

/* Add help text above "Add new price" button */
.uk-card:has(#mainPriceTable) .uk-card-footer > div::before {
    content: "Click ADD NEW PRICE to include both USD and EUR prices.";
    display: block;
    margin-bottom: 10px;
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
}

/* Hide 'is image' row - backup selector */
.uk-clearfix:has(input[name="media[is_image]"]) {
    display: none !important;
}

/* Hide Role/Displayable row - backup selector */
.uk-clearfix:has(input[name="media[media_roles]"]) {
    display: none !important;
}

/* Additional Role hiding - target the fieldset or parent containing radio buttons in Image Info */
.uk-card:has(#file_title) .uk-clearfix:has(input[type="radio"]) {
    display: none !important;
}

/* ========================================
   Registration Form - Compact & Centered Layout
   ======================================== */

/* Center the registration form and limit width */
form#adminForm.form-validate {
    max-width: 600px;
    margin: 0 auto;
}

/* Make the table take full width of container */
form#adminForm table.adminForm.user-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Style table rows */
form#adminForm table.adminForm.user-details tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

/* Labels - full width above input */
form#adminForm table.adminForm.user-details td.key {
    width: 100%;
    padding: 0 0 4px 0;
}

form#adminForm table.adminForm.user-details td.key label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Input cells - full width */
form#adminForm table.adminForm.user-details td:not(.key) {
    width: 100%;
    padding: 0;
}

/* Make inputs full width */
form#adminForm table.adminForm.user-details input.form-control,
form#adminForm table.adminForm.user-details textarea.form-control,
form#adminForm table.adminForm.user-details select.form-select {
    width: 100%;
    max-width: 100%;
}

/* Center the Register/Cancel buttons */
form#adminForm .d-flex.align-items-center.gap-3 {
    justify-content: center;
    margin-top: 20px;
}

/* Style the Register as Seller box */
.register-seller-option {
    max-width: 600px;
    margin: 20px auto !important;
}

/* Center the login form section too */
form#com-form-login {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* Center page headings */
form#adminForm ~ h2,
h1 + form#com-form-login ~ h2 {
    text-align: center;
}

/* Category browse cards (owner 2026-07-10): purchase fields (selectors, note/date/detail
   inputs — the addtocart-position custom fields) were rendering ON the grid cards,
   overlapping text and spilling columns on iPad/desktop. Cards show image/title/short
   description/price only; the order form lives on the product page. */
.vm-product-grid .vm-customfields-wrap,
.category-view .vm-customfields-wrap,
.featured-view .vm-customfields-wrap {
    display: none !important;
}

/* Back-to-top button (owner 2026-07-10): on wide/landscape it was rendering mid-page /
   taking layout space and stranding half the screen. Force it to a small fixed corner
   button pinned to the viewport bottom-right, above everything. Reparent to <body> at
   runtime too (see JS in yardsalefeatures) in case a transformed ancestor is the container. */
#back-to-top {
    position: fixed !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    top: auto !important;
    width: 3rem !important;
    height: 3rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483000 !important;
    overflow: hidden !important;
}

/* Checkout layout (owner 2026-07-11): the form is two col-lg-6 halves. On an iPad in
   landscape (~1024px) that split into two columns, and in our model the left half
   (addresses/registration) is mostly empty, so half the screen looked wasted. Keep a
   single centered column until true desktop width; only split at xl. Scoped to the
   checkout form so nothing else is touched. */
@media (max-width: 1199.98px) {
    #checkoutForm > .col-lg-6 {
        width: 100% !important;
        max-width: 640px;
        margin-left: auto !important;
        margin-right: auto !important;
        border-right: 0 !important;
    }
    #checkoutForm > .col-lg-6.sticky-top { position: static !important; }
}
@media (min-width: 1200px) {
    #checkoutForm { max-width: 1100px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   BB DESIGN TOKENS (owner 2026-07-11) — SINGLE SOURCE for colors + fonts.
   RULE: highlight/shaded boxes of the SAME intent MUST use identical background
   AND text color — no subtle near-duplicates. Pull from these variables and the
   .bb-hl-* classes; never hand-pick per-block colors. Canonical values are the
   front-page "Made for our community" tan and "See everything" green.
   See memory bb-highlight-box-consistency + css-ripple-review-rule.
   ============================================================================ */
:root {
    /* CHAINED TO THE THEME (owner 2026-07-11): the template style (id 12) emits
       --color-primary/success/danger/warning — our tokens follow them, so editing
       colors in System > Site Template Styles > ja_purity_iv re-skins EVERYTHING
       (tabs, menus, containers, buttons, headers) in one place. Hex fallbacks =
       current brand palette (also set as the theme's own defaults). */
    --bb-navy:       var(--color-primary, #14365e);   /* primary */
    --bb-green:      var(--color-success, #2c4a2c);   /* CTA green */
    --bb-red:        var(--color-danger,  #8a2f2f);   /* destructive */
    --bb-brown:      var(--bb-accent-color, #7d6542);   /* accent — editable in theme "BB Custom" */
    --bb-tan:        var(--bb-highlight-bg-color, #f4f1ea);      /* canonical highlight bg — editable in theme "BB Custom" */
    --bb-tan-ink:    var(--bb-highlight-text-color, #5a4a30);  /* text on highlight — editable in theme "BB Custom" */
    --bb-tan-border: var(--bb-highlight-border-color, #e2dccb);   /* tan box border — editable in theme "BB Custom" */
    --bb-green-ink:  #ffffff;   /* text on green */
    --bb-brown-ink:  #ffffff;
    --bb-ink:        var(--bb-ink-color, #3a2f1c);   /* warm heading/title ink — editable in theme "BB Custom" */
    --bb-muted:      #555555;   /* muted secondary text */
    --bb-line:       var(--bb-highlight-border-color, #e6e1d8);   /* hairline / border — editable in theme "BB Custom" */
    --bb-checkbox:   var(--bb-checkbox-color, var(--color-primary, #14365e));   /* checkbox/radio tick — editable in theme "BB Custom" (#204) */
}
/* Reusable highlight boxes — shape (radius/padding) may vary per placement, but the
   FILL and TEXT color may not. Use these classes instead of inline colors. */
.bb-hl        { border-radius:.75rem; padding:1.1rem 1.3rem; line-height:1.5 }
.bb-hl-tan    { background:var(--bb-tan);   color:var(--bb-tan-ink); border:1px solid var(--bb-tan-border) }
.bb-hl-green  { background:var(--bb-green); color:var(--bb-green-ink) }
.bb-hl-green a{ color:var(--bb-green-ink) }
.bb-hl-brown  { background:var(--bb-brown); color:var(--bb-brown-ink) }
.bb-cta-green { display:inline-block; background:var(--bb-green); color:var(--bb-green-ink);
                padding:.65rem 1.4rem; border-radius:10px; font-weight:700; text-decoration:none }
.bb-pill-tan  { display:inline-block; background:var(--bb-tan); color:var(--bb-tan-ink);
                border:1px solid var(--bb-tan-border); border-radius:999px; padding:.5rem 1.2rem; font-weight:600 }

/* SITE-WIDE BUTTON BRANDING (owner 2026-07-11): every Bootstrap/UIkit semantic button
   pulls the brand palette — ONE override instead of per-button patches.
   success=brand green, danger=brand red, primary=navy. Hover slightly darker. */
.btn-success, .uk-button-success {
    background: var(--bb-green) !important; border-color: var(--bb-green) !important; color: #fff !important;
}
.btn-danger, .uk-button-danger {
    background: var(--bb-red, #8a2f2f) !important; border-color: var(--bb-red, #8a2f2f) !important; color: #fff !important;
}
.btn-primary, .uk-button-primary {
    background: var(--bb-navy) !important; border-color: var(--bb-navy) !important; color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .uk-button-success:hover { background: #223a22 !important; border-color: #223a22 !important; }
.btn-danger:hover, .btn-danger:focus, .uk-button-danger:hover { background: #732727 !important; border-color: #732727 !important; }
.btn-primary:hover, .btn-primary:focus, .uk-button-primary:hover { background: #0f2947 !important; border-color: #0f2947 !important; }

/* ========================================
   EDIT-SCREEN CONTAINER UNIFICATION (owner 2026-07-11)
   The editor mixes VM's native panels (rounded, light 1px border) with INJECTED
   containers (Additional Product Details, pay box, service options panel) that used
   unstyled uk-card classes — squared, darker, inconsistent. Normalize every injected
   container to the native card look. Identity-keyed (#ids) = permanent.
   ======================================== */
#vmcl-custom-fields-container,
#bbPayBox,
#bb-so-panel {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 16px 0 !important;
    padding: 18px 22px !important;
}

/* THE canonical section container (owner 2026-07-11): ONE color, ONE spacing,
   site-wide. The editor's layout enforcer stamps .bb-card on every section box, and
   any future container should use this class instead of ad-hoc styles. */
.bb-card {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 0 0 16px !important;
    padding: 18px 22px !important;
}

/* FONT CONSISTENCY (owner 2026-07-11): one body/label size site-wide on form
   containers — the slightly LARGER non-header size (18px labels, 16px inputs).
   Section headers keep their own scale. */
.bb-card label,
.bb-card td,
.bb-card .uk-form-label,
table.adminform td,
table.adminform label,
table.productPriceTable td {
    font-size: 18px !important;
    line-height: 1.5;
    color: #4a4a4a;
}
.bb-card input, .bb-card select, .bb-card textarea,
table.adminform input, table.adminform select, table.adminform textarea,
table.productPriceTable input, table.productPriceTable select {
    font-size: 16px !important;
}
/* helper/hint text stays smaller but consistent */
.bb-card small, .bb-card .hint, .bb-card [style*="font-size: 11px"], .bb-card [style*="font-size:11px"] {
    font-size: 13px !important;
}
#vmcl-custom-fields-container .uk-card-header { padding: 0 0 10px; border: 0; }
#vmcl-custom-fields-container .uk-card-title {
    font-size: 1.5rem; font-weight: 400; color: #3d3d3d;
}
#vmcl-custom-fields-container .uk-card-body { padding: 0; }

/* Product Name input (owner 2026-07-11): VM's required-field styling paints a bright
   green border. Match the normal input border like every other field. */
input[name="product_name"],
input[name="product_name"]:focus,
input[name="product_name"].required,
input[name="product_name"]:valid {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   Seller editor: secondary containers on every field group
   (owner 2026-07-11). Identity-keyed to vmcustomloader's own
   .vmcl-group-section/.vmcl-group-fields classes — editor-only
   markup, never rendered on buyer pages. Same inner-box look as
   the Product Information box.
   ============================================================ */
#vmcl-custom-fields-container .vmcl-group-section > .vmcl-group-fields,
.vmcl-availability-section > .vmcl-group-fields {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}
#vmcl-custom-fields-container .vmcl-group-section,
.vmcl-availability-section { margin: 0 0 16px !important; }
/* A group whose only field lives elsewhere renders an empty box — hide it
   until something (e.g. the relocated pay-box) lands inside. */
#vmcl-custom-fields-container .vmcl-group-fields:empty { display: none !important; }
/* Same font scale as the rest of the editor: 18px labels, 16px inputs. */
#vmcl-custom-fields-container .vmcl-group-fields label,
#vmcl-custom-fields-container .vmcl-group-fields td,
.vmcl-availability-section .vmcl-group-fields label { font-size: 18px !important; font-weight: 400 !important; color: var(--bb-form-label-color,#666) !important; }
#vmcl-custom-fields-container .vmcl-group-fields input,
#vmcl-custom-fields-container .vmcl-group-fields select,
#vmcl-custom-fields-container .vmcl-group-fields textarea,
.vmcl-availability-section .vmcl-group-fields input { font-size: 16px !important; }

/* Internal note textarea: match the standard input border (removes the
   odd teal outline), identity-keyed on the field name. */
textarea[name="intnotes"], textarea#intnotes {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

/* ============================================================
   Editor typography + inner-box standards (owner 2026-07-11)
   - Section headers (fieldset legends) match the "Additional
     Product Details" header style.
   - Label cells match the "Number Available" label standard
     (18px / 400 / theme Form-labels color).
   - Every fieldset table gets the same rounded inner box as the
     Item Availability group. Scoped to .bb-card so nothing
     outside the editor cards is touched.
   ============================================================ */
.bb-card legend {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}
fieldset.bb-card > table,
.bb-card fieldset > table,
table.productPriceTable {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    background: #fff !important;
    width: 100%;
}
fieldset.bb-card table > tbody > tr > td:first-child,
fieldset.bb-card table > tbody > tr > td:first-child > div,
.bb-card fieldset table > tbody > tr > td:first-child,
.bb-card fieldset table > tbody > tr > td:first-child > div,
.productPriceTable > tbody > tr > td:first-child,
.productPriceTable > tbody > tr > td:first-child > div,
#vmcl-alt-price-row td:first-child,
#vmcl-alt-price-row td:first-child div {
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    color: var(--bb-form-label-color, #666) !important;
}
/* sub-group heads (Item Availability / Pickup/Delivery) — explicit size so
   they stay the consistent bold sub-header across groups */
#vmcl-custom-fields-container .vmcl-group-section > div:first-child {
    font-size: 18px !important;
}

/* vmuikit's own section cards (Short/Product Description, Product Status —
   the pencil-icon system) carry id-scoped borders that outrank .bb-card.
   Standardize them at the same specificity (owner 2026-07-11). */
#vmuikit-admin-ui-tabs .uk-card {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
#vmuikit-admin-ui-tabs .uk-card-header {
    border: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: transparent !important;
}
#vmuikit-admin-ui-tabs .uk-card-body { border: 0 !important; }



/* Hide VirtueMart debug messages but keep important alerts */
#system-message-container .alert-info:has(.vmdebug),
.vmdebug {
    display: none !important;
}

/* Hide noscript debug content */
noscript .vmdebug {
    display: none !important;
}

/* ========================================
   VirtueMart Toolbar - Hide Unwanted Buttons
   ======================================== */

/* Hide by task attribute */
joomla-toolbar-button[task="massxref_cats"],
joomla-toolbar-button[task="massxref_sgrps"],
joomla-toolbar-button[task="createchild"],
joomla-toolbar-button[task="cloneproductwithchildren"],
joomla-toolbar-button[task="addrating"] {
    display: none !important;
}

/* ========================================
   VirtueMart Side Menu - Hide Tools Section
   Tools is the 5th/last menu section
   ======================================== */

/* Hide the last uk-parent in both menus (Tools section) */
.vmuikit-menu .uk-nav.uk-nav-default > li.uk-parent:nth-child(5) {
    display: none !important;
}

/* ========================================
   Toolbar Layout Improvements
   ======================================== */

.toolbar-box {
    margin-bottom: 15px !important;
}

#toolbar {
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* ========================================
   My Account Page - Hide Admin Interface Button
   ======================================== */

/* Hide "Access Administration Interface" button */
a[title="Access Administration Interface"] {
    display: none !important;
}

/* ========================================
   Category Grid - Homepage Styling
   ======================================== */

/* Category tile container */
.category-view .row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

/* Individual category tile */
.category-view .category {
    flex: 0 0 calc(24% - 6px);
    max-width: calc(24% - 6px);
    box-sizing: border-box;
}

.category-view .category .spacer {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.category-view .category .spacer:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Category title */
.category-view .category h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    text-align: center;
}

/* Category title with product count */
.category-view .category .category-title-line {
    display: inline;
    white-space: nowrap;
}

.category-view .category .category-product-count {
    font-weight: 400;
    color: #666;
    margin-left: 3px;
}

.category-view .category h2 a {
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Category icon/image */
.category-view .category .browseCategoryImage {
    width: 130px !important;
    height: 130px !important;
    object-fit: contain;
}

/* Remove the br between title and image, reorder with flexbox */
.category-view .category h2 a br {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .category-view .category {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .category-view .category {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
    .category-view .category .spacer {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .category-view .category {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================
   Product list (front market) — compact images + counter fix
   ======================================== */

/* Shrink product-list images to match the compact category icons */
.vm-product-grid .browseProductImage {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
    margin: 0 auto;
}

/* Keep the "Results 1-6 of 6" counter on one line (it sits in a narrow column) */
.display-number {
    white-space: nowrap;
}

/* Product grid columns — match the 4/3/2/1 category grid layout */
.vm-product-grid .product { flex: 0 0 25% !important; max-width: 25% !important; }
@media (max-width: 992px) { .vm-product-grid .product { flex: 0 0 33.333% !important; max-width: 33.333% !important; } }
@media (max-width: 768px) { .vm-product-grid .product { flex: 0 0 50% !important; max-width: 50% !important; } }
@media (max-width: 480px) { .vm-product-grid .product { flex: 0 0 100% !important; max-width: 100% !important; } }

/* ========================================
   Add-to-cart area (front market listings)
   ----------------------------------------
   Yard-sale listings are single, unique items, so the quantity stepper is
   unnecessary — and packing [stepper][Add to Cart] into a 25%-wide card crushed
   the button down to "ADD T". Hide the stepper (quantity stays 1) and let the
   Add to Cart button take the full card width so its label never clips.
   ======================================== */
.vm-product-grid .addtocart-bar .quantity-box,
.vm-product-grid .addtocart-bar label.quantity_box,
.vm-product-grid .addtocart-bar .row > div:has(.quantity-box) {
    display: none !important;
}
.vm-product-grid .addtocart-bar .row { display: block !important; }
.vm-product-grid .addtocart-button,
.vm-product-grid .addtocart-bar button[type="submit"],
.vm-product-grid .addtocart-bar input[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ========================================
   Product card polish (task #31) — consistent card sizing + button alignment
   ----------------------------------------
   The bs5 grid already gives each card `d-flex flex-column h-100` so a row of
   cards is equal-height, but the inner blocks weren't aligned: short vs long
   titles pushed the price/button rows to different heights, and the action
   button floated mid-card instead of sitting at the bottom. These rules:
     - reserve a consistent image stage so cards don't jump,
     - give the title a min-height so the price row starts at the same place,
     - push the add-to-cart / details button to the card bottom (mt-auto) so the
       buttons line up across the row.
   Scoped to .vm-product-grid, purely visual, additive. REVERT: delete this block.
   ======================================== */

/* Consistent image stage (image itself stays 150x150 from the rule above) */
.vm-product-grid .vm-product-media-container {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Even out 1-line vs 2-line titles so the price row aligns across cards */
.vm-product-grid .vm-product-title {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* Tidy the short-description spacing */
.vm-product-grid .vm-product-s-desc {
    margin-bottom: .75rem;
}

/* Pin the action area to the bottom of the card so buttons align across a row */
.vm-product-grid .product-container .addtocart-bar,
.vm-product-grid .product-container > a.btn {
    margin-top: auto;
}

/* A little breathing room below the price block */
.vm-product-grid .product-container .vm-price-desc,
.vm-product-grid .product-container .product-price {
    margin-bottom: .5rem;
}

/* Smaller image stage on phones for a tighter single-column list */
@media (max-width: 480px) {
    .vm-product-grid .browseProductImage { width: 130px !important; height: 130px !important; }
    .vm-product-grid .vm-product-media-container { min-height: 140px; }
}

/* ========================================
   Product Edit Form - Hide Unnecessary Fields
   ======================================== */

/* Hide Product SKU field */
.uk-clearfix:has(#product_sku) {
    display: none !important;
}

/* Hide Manufacturer field */
.uk-clearfix:has(#virtuemart_manufacturer_id) {
    display: none !important;
}

/* Hide On Featured checkbox */
.uk-clearfix:has(#product_special) {
    display: none !important;
}

/* Hide Discontinued checkbox */
.uk-clearfix:has(#product_discontinued) {
    display: none !important;
}
/* Classic adminform markup variant (owner 2026-07-11): the seller editor renders VM's
   classic templates where the .uk-clearfix wrapper doesn't exist, so the rule above
   matches nothing. Hide ONLY the checkbox itself and its own label — never any
   container, so this can never blank a panel. */
#product_discontinued,
label[for="product_discontinued"],
label:has(> #product_discontinued) {
    display: none !important;
}

/* Hide GTIN (EAN, ISBN) field */
.uk-clearfix:has(#product_gtin) {
    display: none !important;
}

/* Hide Product Details Page layout dropdown */
.uk-clearfix:has(#layout) {
    display: none !important;
}

/* Hide Shopper Group field */
.uk-clearfix:has(select[name="virtuemart_shoppergroup_id[]"]) {
    display: none !important;
}

/* Hide Product Alias (slug) field */
.uk-clearfix:has(#slug) {
    display: none !important;
}

/* Hide MPN field */
.uk-clearfix:has(#product_mpn) {
    display: none !important;
}

/* Hide URL field */
.uk-clearfix:has(#product_url) {
    display: none !important;
}

/* Hide Child Products section (Product Parent ID field) */
.uk-clearfix:has(#product_parent_id) {
    display: none !important;
}

/* Hide the entire Child Product accordion/section if it exists */
li:has(a[href="#tabProductParent"]),
#tabProductParent {
    display: none !important;
}

/* Hide Force canonical category */
.uk-clearfix:has(#product_canon_category_id) {
    display: none !important;
}

/* Widen Categories selector */
#categories,
#categories + .chosen-container,
.uk-clearfix:has(#categories) .uk-form-controls,
select[name="categories[]"],
select[name="categories[]"] + .chosen-container {
    width: 100% !important;
    min-width: 300px !important;
}

/* ========================================
   Meta Information Section - Hide Entire Card
   ======================================== */

/* Hide the entire Meta Information card (has code icon) */
.uk-card:has([uk-icon*="icon: code"]) {
    display: none !important;
}

/* ========================================
   Product Status Section - Hide Most Fields
   ======================================== */

/* Hide In Stock */
.uk-clearfix:has(#product_in_stock) {
    display: none !important;
}

/* Hide Low Stock Notification */
.uk-clearfix:has(#low_stock_notification) {
    display: none !important;
}

/* Hide Out of Stock action dropdown */
.uk-clearfix:has(#product_stockhandle) {
    display: none !important;
}

/* Hide Availability text/image fields */
.uk-clearfix:has(#product_availability) {
    display: none !important;
}

/* Hide Booked/ordered */
.uk-clearfix:has(#product_ordered) {
    display: none !important;
}

/* Hide Purchase Quantity Steps */
.uk-clearfix:has(#step_order_level) {
    display: none !important;
}

/* Hide Minimum Purchase Quantity */
.uk-clearfix:has(#min_order_level) {
    display: none !important;
}

/* Hide Maximum Purchase Quantity */
.uk-clearfix:has(#max_order_level) {
    display: none !important;
}

/* ========================================
   Child Product Section - Hide Entire Card
   ======================================== */

/* Hide the entire Child Product card (has tree icon) */
.uk-card:has([uk-icon*="tree"]) {
    display: none !important;
}

/* ========================================
   Email to Shoppers Section - Hide Entire Card
   ======================================== */

/* Hide the entire Email to Shoppers card (has mail icon) */
.uk-card:has([uk-icon*="mail"]) {
    display: none !important;
}

/* ========================================
   Pricing Section - Simplify for Yardsale
   Keep only: Cost price input and Final price input
   ======================================== */

/* Hide Shopper Group column in pricing table */
table.productPriceTable td:has(select[name="mprices[virtuemart_shoppergroup_id][]"]) {
    display: none !important;
}

/* Hide the vertical divider before Shopper Group */
table.productPriceTable td[style*="background: #d5d5d5"] {
    display: none !important;
}

/* Hide Base price row (readonly, not needed for yardsale) */
table.productPriceTable tr:has(input[name="mprices[basePrice][]"]) {
    display: none !important;
}

/* Hide Final price row - sellers only need Cost price */
table.productPriceTable tr:has(input[name="mprices[salesPrice][]"]) {
    display: none !important;
}

/* Hide Override row */
table.productPriceTable tr:has(input[name^="mprices[override]"]) {
    display: none !important;
}

/* Hide Calculate Cost checkbox and label in Final price row */
table.productPriceTable td:has(input[name^="mprices[use_desired_price]"]) {
    display: none !important;
}

/* Hide Tax Affecting column (empty after hiding Base price row anyway) */
table.productPriceTable td:has(span[uk-tooltip*="Tax Affecting"]) {
    display: none !important;
}

/* ========================================
   Seller editor — native-field bleed + shopper-group label (owner 2026-07-10)
   ----------------------------------------
   ROOT CAUSE: the frontend seller editor (view=product&managing=1) renders VM's
   CLASSIC admin templates — <table class="adminform"> with <tr>/<td> cells — NOT the
   UIkit ".uk-clearfix" markup the field-level hides above assume. So those
   ".uk-clearfix:has(#field)" rules match nothing here, leaving SKU/GTIN/MPN,
   Manufacturer/URL and the price "shopper group" control visible and bleeding off the
   right edge on phones. These parallel rules target the real .adminform structure.
   Section-level ".uk-card:has()" hides still work (whole cards ARE UIkit) — untouched.
   Only WHOLE rows whose every field is unwanted are row-hidden; mixed rows are left
   alone so Name / Published / Categories are never hit.
   ======================================== */

/* Keep the whole editor within the viewport — the .adminform tables use many
   fixed-width columns that overflow narrow screens (the "bleeding / unreadable" report). */
table.adminform,
table.productPriceTable {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: auto !important;
}
table.adminform td,
table.productPriceTable td { min-width: 0 !important; }
table.adminform input[type="text"],
table.adminform select,
table.adminform textarea {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Row 2: SKU + GTIN + MPN (all three unwanted) — hide the entire row */
table.adminform tr:has(#product_sku),
table.adminform tr:has(#product_gtin) {
    display: none !important;
}

/* Row 3: Manufacturer + Details-page layout (unwanted) — hide the row. Keyed on the
   layout select, NOT product_url: the URL input is MOVED to its own visible
   "Reference URL" row by vmcustomloader (#174, owner 2026-07-11). */
table.adminform tr:has(> td > select[name="layout"]) {
    display: none !important;
}

/* Price table cost row: hide the trailing cells (divider + "Shopper Group" caption/select)
   that produce the "you are in shopper groups: …" label and widen the row off-screen.
   Cells 1-3 (Cost label, price input, currency) are all the seller needs. */
table.productPriceTable tr:has(input[name="mprices[product_price][]"]) td:nth-child(n+4) {
    display: none !important;
}

/* Currency dropdown (owner 2026-07-11): currency is a SELLER-LEVEL setting (#101) —
   the per-item "US Dollar" selector must not show. CSS so it can never "come back"
   on a re-render (the old one-shot JS hide was timing-dependent). The select stays in
   the DOM (display:none), so the alt-price JS still reads/binds its value.
   NOTE: VM replaces the native select with a Chosen/enhanced widget — hide the whole
   CELL that contains the currency select (covers native select + generated widget). */
table.productPriceTable select[name="mprices[product_currency][]"] {
    display: none !important;
}
table.productPriceTable td:has(select[name="mprices[product_currency][]"]) {
    display: none !important;
}
/* the generated widget sits right after the native select — hide the WIDGET only
   (adjacent siblings). Deliberately NO ancestor :has(div) rule: the price input can
   share the same wrapper, and hiding an ancestor would take the price with it
   (the :has() footgun). */
select[name="mprices[product_currency][]"] + .chzn-container,
select[name="mprices[product_currency][]"] + .chosen-container,
select[name="mprices[product_currency][]"] + .select2,
select[name="mprices[product_currency][]"] + .selectr-container,
select[name="mprices[product_currency][]"] + div[class*="select"] {
    display: none !important;
}

/* ========================================
   Internal Note Section - Hide
   ======================================== */

/* Hide Internal note card (has lock icon) */
.uk-card:has([uk-icon*="lock"]) {
    display: none !important;
}

/* ========================================
   Image Information Section - Hide Fields
   Keep only: File Title, Displayed image subtitle
   ======================================== */

/* Hide File published checkbox */
.uk-clearfix:has(#media\\[media_published\\]),
.uk-clearfix:has(input[name="media[media_published]"]),
.uk-clearfix:has(input[id*="media_published"]),
.uk-clearfix:has(label[for*="media_published"]) {
    display: none !important;
}

/* Hide "is image" checkbox */
.uk-clearfix:has(#media\\[is_image\\]) {
    display: none !important;
}

/* Hide Image Alt-Text */
.uk-clearfix:has(input[name="media[file_meta]"]) {
    display: none !important;
}

/* Hide Image Class */
.uk-clearfix:has(input[name="media[file_class]"]) {
    display: none !important;
}

/* Hide Used url */
.uk-clearfix:has(input[name="media[file_url]"]) {
    display: none !important;
}

/* Hide Used thumb url */
.uk-clearfix:has(#file_url_thumb) {
    display: none !important;
}

/* Hide Role/Displayable radio buttons - target by name patterns */
.uk-clearfix:has(input[type="radio"][name*="media_roles"]),
.uk-clearfix:has(input[type="radio"][name*="roles"]) {
    display: none !important;
}

/* Hide Storing location/type (readonly input with value product) */
.uk-clearfix:has(input[readonly][value="product"]) {
    display: none !important;
}

/* Hide Languages select */
.uk-clearfix:has(#mediaactive_languages) {
    display: none !important;
}

/* Hide Vendor in image section (has readonly span) */
.uk-clearfix:has(span.inputbox[readonly]) {
    display: none !important;
}

/* ========================================
   Hide Writeable Path Status Messages
   ======================================== */

/* Hide the server path writeable status alert */
.uk-alert-primary:has(.vmquote) {
    display: none !important;
}

/* Hide availability image selector and preview */
#imagelib,
select#image {
    display: none !important;
}

/* ========================================
   BATCH 1: Product Name, Images Search, Related
   ======================================== */

/* Make Product Information grid single column layout */
.uk-card:has(#product_name) .uk-card-body > div[uk-grid] {
    display: block !important;
}

.uk-card:has(#product_name) .uk-card-body > div[uk-grid] > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Match Product Name input width to Categories selector */
#product_name {
    width: 100% !important;
    min-width: 300px !important;
    box-sizing: border-box !important;
}

.uk-clearfix:has(#product_name) .uk-form-controls {
    width: 100% !important;
}

/* Hide Images search container (keep Upload File and Image Information) */
.vmuikit-js-images {
    display: none !important;
}

/* Hide Related Categories container */
.uk-card:has([uk-icon*="category"]) {
    display: none !important;
}

/* Hide Related Products container */
.uk-card:has([uk-icon*="product"]) {
    display: none !important;
}

/* ========================================
   BATCH 2: Fixes
   ======================================== */

/* Hide Help button */
.button-help {
    display: none !important;
}

/* Make ALL form labels consistent - normal weight, gray */
.uk-card .uk-form-label,
.uk-card:has(#product_name) .uk-form-label,
.uk-card:has(#published) .uk-form-label,
.uk-clearfix .uk-form-label,
.productPriceTable td:first-child,
.productPriceTable td:first-child div {
    font-weight: 400 !important;
    color: #666 !important;
    font-size: 14px !important;
    text-align: left !important;
}

/* Consistent vertical spacing for ALL fields in Product Information section */
.uk-card:has(#product_name) .uk-clearfix,
.uk-card:has(#published) .uk-clearfix {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Hide Vendor row - multiple selectors for reliability */
.uk-clearfix:has(span.inputbox[readonly]:not([id])),
.uk-clearfix:has(span.inputbox[readonly]) {
    display: none !important;
}

/* Collapse grid gaps in Product Information */
.uk-card:has(#product_name) .uk-card-body [uk-grid] {
    margin-top: 0 !important;
    gap: 0 !important;
}

.uk-card:has(#product_name) .uk-card-body [uk-grid] > div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.uk-card:has(#product_name) .uk-card-body .uk-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra padding/margin from the card containers */
.uk-card:has(#product_name),
.uk-card:has(#published) {
    padding: 0 !important;
}

.uk-card:has(#product_name) > .uk-card,
.uk-card:has(#published) > .uk-card {
    margin: 0 !important;
    padding: 0 !important;
}

/* Match Item Price header to other section headers */
.uk-card:has(#mainPriceTable) > .uk-card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 15px 20px 10px !important;
}

.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* Hide entire Action when out of stock container */
div.uk-margin:has(#product_stockhandle) {
    display: none !important;
}

/* Hide entire Availability container */
div.uk-margin:has(#product_availability) {
    display: none !important;
}

/* ========================================
   Replace Pricing Title with "Item Price"
   ======================================== */

/* Hide the original pricing title text but keep layout */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div {
    font-size: 0 !important;
}

/* Keep the icon visible */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div > span[uk-icon] {
    font-size: 1.2rem !important;
}

/* Add replacement text - match .uk-card-title exactly */
.uk-card:has(#mainPriceTable) > .uk-card-header .uk-card-title .uk-width-expand > div::after {
    content: "Item Price";
    font-size: 1.2rem !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

/* Add help text above "Add new price" button */
.uk-card:has(#mainPriceTable) .uk-card-footer > div::before {
    content: "Click ADD NEW PRICE to include both USD and EUR prices.";
    display: block;
    margin-bottom: 10px;
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
}

/* Hide 'is image' row - backup selector */
.uk-clearfix:has(input[name="media[is_image]"]) {
    display: none !important;
}

/* Hide Role/Displayable row - backup selector */
.uk-clearfix:has(input[name="media[media_roles]"]) {
    display: none !important;
}

/* Additional Role hiding - target the fieldset or parent containing radio buttons in Image Info */
.uk-card:has(#file_title) .uk-clearfix:has(input[type="radio"]) {
    display: none !important;
}

/* ========================================
   Registration Form - Compact & Centered Layout
   ======================================== */

/* Center the registration form and limit width */
form#adminForm.form-validate {
    max-width: 600px;
    margin: 0 auto;
}

/* Make the table take full width of container */
form#adminForm table.adminForm.user-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Style table rows */
form#adminForm table.adminForm.user-details tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

/* Labels - full width above input */
form#adminForm table.adminForm.user-details td.key {
    width: 100%;
    padding: 0 0 4px 0;
}

form#adminForm table.adminForm.user-details td.key label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Input cells - full width */
form#adminForm table.adminForm.user-details td:not(.key) {
    width: 100%;
    padding: 0;
}

/* Make inputs full width */
form#adminForm table.adminForm.user-details input.form-control,
form#adminForm table.adminForm.user-details textarea.form-control,
form#adminForm table.adminForm.user-details select.form-select {
    width: 100%;
    max-width: 100%;
}

/* Center the Register/Cancel buttons */
form#adminForm .d-flex.align-items-center.gap-3 {
    justify-content: center;
    margin-top: 20px;
}

/* Style the Register as Seller box */
.register-seller-option {
    max-width: 600px;
    margin: 20px auto !important;
}

/* Center the login form section too */
form#com-form-login {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* Center page headings */
form#adminForm ~ h2,
h1 + form#com-form-login ~ h2 {
    text-align: center;
}

/* Category browse cards (owner 2026-07-10): purchase fields (selectors, note/date/detail
   inputs — the addtocart-position custom fields) were rendering ON the grid cards,
   overlapping text and spilling columns on iPad/desktop. Cards show image/title/short
   description/price only; the order form lives on the product page. */
.vm-product-grid .vm-customfields-wrap,
.category-view .vm-customfields-wrap,
.featured-view .vm-customfields-wrap {
    display: none !important;
}

/* Back-to-top button (owner 2026-07-10): on wide/landscape it was rendering mid-page /
   taking layout space and stranding half the screen. Force it to a small fixed corner
   button pinned to the viewport bottom-right, above everything. Reparent to <body> at
   runtime too (see JS in yardsalefeatures) in case a transformed ancestor is the container. */
#back-to-top {
    position: fixed !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    top: auto !important;
    width: 3rem !important;
    height: 3rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483000 !important;
    overflow: hidden !important;
}

/* Checkout layout (owner 2026-07-11): the form is two col-lg-6 halves. On an iPad in
   landscape (~1024px) that split into two columns, and in our model the left half
   (addresses/registration) is mostly empty, so half the screen looked wasted. Keep a
   single centered column until true desktop width; only split at xl. Scoped to the
   checkout form so nothing else is touched. */
@media (max-width: 1199.98px) {
    #checkoutForm > .col-lg-6 {
        width: 100% !important;
        max-width: 640px;
        margin-left: auto !important;
        margin-right: auto !important;
        border-right: 0 !important;
    }
    #checkoutForm > .col-lg-6.sticky-top { position: static !important; }
}
@media (min-width: 1200px) {
    #checkoutForm { max-width: 1100px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   BB DESIGN TOKENS (owner 2026-07-11) — SINGLE SOURCE for colors + fonts.
   RULE: highlight/shaded boxes of the SAME intent MUST use identical background
   AND text color — no subtle near-duplicates. Pull from these variables and the
   .bb-hl-* classes; never hand-pick per-block colors. Canonical values are the
   front-page "Made for our community" tan and "See everything" green.
   See memory bb-highlight-box-consistency + css-ripple-review-rule.
   ============================================================================ */
:root {
    /* CHAINED TO THE THEME (owner 2026-07-11): the template style (id 12) emits
       --color-primary/success/danger/warning — our tokens follow them, so editing
       colors in System > Site Template Styles > ja_purity_iv re-skins EVERYTHING
       (tabs, menus, containers, buttons, headers) in one place. Hex fallbacks =
       current brand palette (also set as the theme's own defaults). */
    --bb-navy:       var(--color-primary, #14365e);   /* primary */
    --bb-green:      var(--color-success, #2c4a2c);   /* CTA green */
    --bb-red:        var(--color-danger,  #8a2f2f);   /* destructive */
    --bb-brown:      var(--bb-accent-color, #7d6542);   /* accent — editable in theme "BB Custom" */
    --bb-tan:        var(--bb-highlight-bg-color, #f4f1ea);      /* canonical highlight bg — editable in theme "BB Custom" */
    --bb-tan-ink:    var(--bb-highlight-text-color, #5a4a30);  /* text on highlight — editable in theme "BB Custom" */
    --bb-tan-border: var(--bb-highlight-border-color, #e2dccb);   /* tan box border — editable in theme "BB Custom" */
    --bb-green-ink:  #ffffff;   /* text on green */
    --bb-brown-ink:  #ffffff;
    --bb-ink:        var(--bb-ink-color, #3a2f1c);   /* warm heading/title ink — editable in theme "BB Custom" */
    --bb-muted:      #555555;   /* muted secondary text */
    --bb-line:       var(--bb-highlight-border-color, #e6e1d8);   /* hairline / border — editable in theme "BB Custom" */
    --bb-checkbox:   var(--bb-checkbox-color, var(--color-primary, #14365e));   /* checkbox/radio tick — editable in theme "BB Custom" (#204) */
}
/* Reusable highlight boxes — shape (radius/padding) may vary per placement, but the
   FILL and TEXT color may not. Use these classes instead of inline colors. */
.bb-hl        { border-radius:.75rem; padding:1.1rem 1.3rem; line-height:1.5 }
.bb-hl-tan    { background:var(--bb-tan);   color:var(--bb-tan-ink); border:1px solid var(--bb-tan-border) }
.bb-hl-green  { background:var(--bb-green); color:var(--bb-green-ink) }
.bb-hl-green a{ color:var(--bb-green-ink) }
.bb-hl-brown  { background:var(--bb-brown); color:var(--bb-brown-ink) }
.bb-cta-green { display:inline-block; background:var(--bb-green); color:var(--bb-green-ink);
                padding:.65rem 1.4rem; border-radius:10px; font-weight:700; text-decoration:none }
.bb-pill-tan  { display:inline-block; background:var(--bb-tan); color:var(--bb-tan-ink);
                border:1px solid var(--bb-tan-border); border-radius:999px; padding:.5rem 1.2rem; font-weight:600 }

/* SITE-WIDE BUTTON BRANDING (owner 2026-07-11): every Bootstrap/UIkit semantic button
   pulls the brand palette — ONE override instead of per-button patches.
   success=brand green, danger=brand red, primary=navy. Hover slightly darker. */
.btn-success, .uk-button-success {
    background: var(--bb-green) !important; border-color: var(--bb-green) !important; color: #fff !important;
}
.btn-danger, .uk-button-danger {
    background: var(--bb-red, #8a2f2f) !important; border-color: var(--bb-red, #8a2f2f) !important; color: #fff !important;
}
.btn-primary, .uk-button-primary {
    background: var(--bb-navy) !important; border-color: var(--bb-navy) !important; color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .uk-button-success:hover { background: #223a22 !important; border-color: #223a22 !important; }
.btn-danger:hover, .btn-danger:focus, .uk-button-danger:hover { background: #732727 !important; border-color: #732727 !important; }
.btn-primary:hover, .btn-primary:focus, .uk-button-primary:hover { background: #0f2947 !important; border-color: #0f2947 !important; }

/* ========================================
   EDIT-SCREEN CONTAINER UNIFICATION (owner 2026-07-11)
   The editor mixes VM's native panels (rounded, light 1px border) with INJECTED
   containers (Additional Product Details, pay box, service options panel) that used
   unstyled uk-card classes — squared, darker, inconsistent. Normalize every injected
   container to the native card look. Identity-keyed (#ids) = permanent.
   ======================================== */
#vmcl-custom-fields-container,
#bbPayBox,
#bb-so-panel {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 16px 0 !important;
    padding: 18px 22px !important;
}

/* THE canonical section container (owner 2026-07-11): ONE color, ONE spacing,
   site-wide. The editor's layout enforcer stamps .bb-card on every section box, and
   any future container should use this class instead of ad-hoc styles. */
.bb-card {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 0 0 16px !important;
    padding: 18px 22px !important;
}

/* FONT CONSISTENCY (owner 2026-07-11): one body/label size site-wide on form
   containers — the slightly LARGER non-header size (18px labels, 16px inputs).
   Section headers keep their own scale. */
.bb-card label,
.bb-card td,
.bb-card .uk-form-label,
table.adminform td,
table.adminform label,
table.productPriceTable td {
    font-size: 18px !important;
    line-height: 1.5;
    color: #4a4a4a;
}
.bb-card input, .bb-card select, .bb-card textarea,
table.adminform input, table.adminform select, table.adminform textarea,
table.productPriceTable input, table.productPriceTable select {
    font-size: 16px !important;
}
/* helper/hint text stays smaller but consistent */
.bb-card small, .bb-card .hint, .bb-card [style*="font-size: 11px"], .bb-card [style*="font-size:11px"] {
    font-size: 13px !important;
}
#vmcl-custom-fields-container .uk-card-header { padding: 0 0 10px; border: 0; }
#vmcl-custom-fields-container .uk-card-title {
    font-size: 1.5rem; font-weight: 400; color: #3d3d3d;
}
#vmcl-custom-fields-container .uk-card-body { padding: 0; }

/* Product Name input (owner 2026-07-11): VM's required-field styling paints a bright
   green border. Match the normal input border like every other field. */
input[name="product_name"],
input[name="product_name"]:focus,
input[name="product_name"].required,
input[name="product_name"]:valid {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   Seller editor: secondary containers on every field group
   (owner 2026-07-11). Identity-keyed to vmcustomloader's own
   .vmcl-group-section/.vmcl-group-fields classes — editor-only
   markup, never rendered on buyer pages. Same inner-box look as
   the Product Information box.
   ============================================================ */
#vmcl-custom-fields-container .vmcl-group-section > .vmcl-group-fields,
.vmcl-availability-section > .vmcl-group-fields {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}
#vmcl-custom-fields-container .vmcl-group-section,
.vmcl-availability-section { margin: 0 0 16px !important; }
/* A group whose only field lives elsewhere renders an empty box — hide it
   until something (e.g. the relocated pay-box) lands inside. */
#vmcl-custom-fields-container .vmcl-group-fields:empty { display: none !important; }
/* Same font scale as the rest of the editor: 18px labels, 16px inputs. */
#vmcl-custom-fields-container .vmcl-group-fields label,
#vmcl-custom-fields-container .vmcl-group-fields td,
.vmcl-availability-section .vmcl-group-fields label { font-size: 18px !important; font-weight: 400 !important; color: var(--bb-form-label-color,#666) !important; }
#vmcl-custom-fields-container .vmcl-group-fields input,
#vmcl-custom-fields-container .vmcl-group-fields select,
#vmcl-custom-fields-container .vmcl-group-fields textarea,
.vmcl-availability-section .vmcl-group-fields input { font-size: 16px !important; }

/* Internal note textarea: match the standard input border (removes the
   odd teal outline), identity-keyed on the field name. */
textarea[name="intnotes"], textarea#intnotes {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

/* ============================================================
   Editor typography + inner-box standards (owner 2026-07-11)
   - Section headers (fieldset legends) match the "Additional
     Product Details" header style.
   - Label cells match the "Number Available" label standard
     (18px / 400 / theme Form-labels color).
   - Every fieldset table gets the same rounded inner box as the
     Item Availability group. Scoped to .bb-card so nothing
     outside the editor cards is touched.
   ============================================================ */
.bb-card legend {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}
.bb-card fieldset > table {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    background: #fff !important;
    width: 100%;
}
.bb-card fieldset table > tbody > tr > td:first-child,
.bb-card fieldset table > tbody > tr > td:first-child > div,
#vmcl-alt-price-row td:first-child,
#vmcl-alt-price-row td:first-child div {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--bb-form-label-color, #666) !important;
}
/* sub-group heads (Item Availability / Pickup/Delivery) — explicit size so
   they stay the consistent bold sub-header across groups */
#vmcl-custom-fields-container .vmcl-group-section > div:first-child {
    font-size: 18px !important;
}

/* vmuikit's own section cards (Short/Product Description, Product Status —
   the pencil-icon system) carry id-scoped borders that outrank .bb-card.
   Standardize them at the same specificity (owner 2026-07-11). */
#vmuikit-admin-ui-tabs .uk-card {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
#vmuikit-admin-ui-tabs .uk-card-header {
    border: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: transparent !important;
}
#vmuikit-admin-ui-tabs .uk-card-body { border: 0 !important; }



/* long tile titles wrap inside the tile instead of spilling out */
.category-view .category .category-title-line { white-space: normal !important; }
@media (max-width: 991px) {
    .category-view :has(> .row > .category) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .category-view :has(> .row > .category) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .category-view :has(> .row > .category) { grid-template-columns: 1fr; }
}

/* ============================================================
   Browse grids: clean 4-3-2-1 cascade (owner 2026-07-12).
   VM emits a NEW .row every 4 items (products AND category tiles),
   so narrow windows wrapped each chunk as 3+1. Merge the chunks:
   rows become display:contents inside ONE grid on their real
   containers (.browse-view for products, .category-view for tiles).
   ============================================================ */
.category-view .browse-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.category-view .browse-view > .row { display: contents !important; }
.category-view .browse-view > :not(.row) { grid-column: 1 / -1; }
.category-view .browse-view .product.vm-col {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}
.category-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.category-view > .row { display: contents !important; }
.category-view > :not(.row) { grid-column: 1 / -1; }
.category-view > .row > .category {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
}
@media (max-width: 991px) {
    .category-view, .category-view .browse-view { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .category-view, .category-view .browse-view { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .category-view, .category-view .browse-view { grid-template-columns: 1fr; }
}

/* Browse tiles: hide the "Product details" link — the whole tile already
   opens the product (owner 2026-07-12; re-added after cleanup ate it). */
.category-view .product .product-details,
.category-view .product .vm-details-button,
.vm-product-grid .product-details,
.vm-product-grid .vm-details-button,
.browse-view .product-details,
.browse-view .vm-details-button {
    display: none !important;
}

/* Chunk rows exist only to group cards — any other child (clearfix divs)
   would occupy a grid cell and misalign the cascade (owner 2026-07-12). */
.browse-view > .row > :not(.product),
.category-view > .row > :not(.category),
.browse-view > .clear,
.category-view > .clear { display: none !important; }

/* VM's horizontal-separator divs between chunk rows span the merged grid
   full-width and forced a row break every 4 cards (owner 2026-07-12). */
.category-view > .horizontal-separator,
.browse-view > .horizontal-separator { display: none !important; }

/* ============================================================
   #176 (owner 2026-07-11): Recent Items / New Services rows sat
   152px apart (24 section mb + 64+64 T4 footnav container padding).
   Tighten ONLY containers whose direct child is one of these
   modules (scoped :has per the bb-css-has rule).
   ============================================================ */
.t4-section.t4-footnav .container:has(> .bb-recent-items) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
/* Owner 2026-07-12: collapse the empty footnav band (blank space between the page
   and the footer/social icons) on pages that DON'T carry the Recent Items / Services
   rows. Scoped to footnav per the bb-css-has rule; keeps real content untouched. */
.t4-section.t4-footnav:not(:has(.bb-recent-items)) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.t4-section.t4-footnav:not(:has(.bb-recent-items)) .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* #204 (owner 2026-07-12): brand checkboxes + radios site-wide via accent-color,
   editable from the BB Custom "Checkboxes & radios" theme field. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--bb-checkbox); }

/* Owner 2026-07-12: tighten the large empty band above the shopfront grid on the
   root category (Shop the Bazaar). The category view + its title carried big top
   spacing; collapse it so the grid sits close under the breadcrumb. */
.com_virtuemart .category-view { padding-top: 0 !important; margin-top: 0 !important; }
.com_virtuemart .category-view > .vm-category-title:first-child { margin-top: 0 !important; }
.com_virtuemart .category-view .vm-category-title { margin-top: 0 !important; }
.com_virtuemart .productdetails-view + *, .com_virtuemart .category-view .row.vm-nolist { margin-top: 0 !important; }